如何设置嵌入在 VSTS 集线器中的 iframe 的高度答案

【问题标题】：How to set height of iframe embedded in VSTS hub如何设置嵌入在 VSTS 集线器中的 iframe 的高度
【发布时间】：2020-05-13 10:32:56
【问题描述】：

我已经创建了一个 VSTS 扩展，请遵循 add a hub 的指南。我的扩展程序将包含一个 iframe，为我自己的工作呈现我的网站。我可以显示，但是devops的iframe中的内容高度很短。

这是我的标记和代码：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <script src="sdk/scripts/VSS.SDK.min.js"></script>
    <title>embedded iframe</title>
</head>
<body>
    <script type="text/javascript">
        VSS.init();
        VSS.ready(function () {
        var assetFrame = document.getElementById("frame");
        assetFrame.src = "https://ehairvietnam.com/contact";
        VSS.notifyLoadSucceeded();

    });
    </script>
    <div id="my-iframe">
        <iframe id="frame" style="width:100%" frameborder="0"></iframe>
    </div>
</body>
</html>

结果：

我在 Chrome 和 iframe 中检查它

<iframe class="external-content--iframe flex-grow themeless" 
        role="presentation" frameborder="0" 
        src="https://anhnguyen.gallery.vsassets.io/_apis/public/gallery/publisher/anhnguyen/extension/anhnguyenextension/0.1.1/assetbyname/hello-world.html"></iframe>

是最大高度，但它的高度内容只有170px。

我尝试在配置文件中设置height 属性，但没有任何改变

"contributions": [
        {
            "id": "Fabrikam.HelloWorld",
            "type": "ms.vss-web.hub",
            "description": "Adds a 'Hello' hub to the Work hub group.",
            "targets": [
                "ms.vss-work-web.work-hub-group"
                ],
            "properties": {
                "name": "LOGTIME",
                "height": "100%",
                "uri": "hello-world.html"
            }
        }
    ],

感谢您的任何 cmets。

【问题讨论】：

标签： html iframe azure-devops azure-devops-extensions

【解决方案1】：

我认为你需要设置div的高度，这可能是因为div的样式限制了内容的显示：

<div style="height: 100%;">
    <iframe id="frame" style="width:100%" frameborder="0"></iframe>
</div>

或者从css中的ID引用你的div来设置样式。可以参考这个case。

【讨论】：