如何设置嵌入 VSTS hub 的 iframe 的高度

Question

我已经创建了一个 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"
            }
        }
    ],

感谢您的评论。

Answer 1

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

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

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

如何设置嵌入 VSTS hub 的 iframe 的高度

How to set height of iframe embedded in VSTS hub

html

iframe

azure-devops

azure-devops-extensions