Question

我有一个webform（asp.net页面），它有一个使用javascript创建的iframe。

在Chrome（版本64.0.3282.140）中，它正确显示HTML，如下所示：

<div id="mydiv" class="row col-sm-12" style="width: 100%; border-width: 1px; border-style: solid; border-color: rgb(95, 65, 147);">
   <div style="background-color:#5f4193 !important; color:white;  height:32px;">
      <a id="kev_cphContent_lbCloseDitto" href="javascript:__doPostBack('kev$cphContent$lbCloseMyPage','')" style="font-size:23px; color:white; text-shadow: 0 1px 0 #fff; padding-right:4px; text-decoration:none; cursor:pointer; float:right;">×</a>
   </div>
   <iframe src="http://page.mysite.org/Default.aspx" id="myframe" frameborder="0" style="width: 100%; height: 600px;"></iframe>
</div>

使用Firefox Quantum（版本58.0.1），iframe将自身设置为宽度：104％

<div id="mydiv" class="row col-sm-12" style="width: 100%; border-width: 1px; border-style: solid; border-color: rgb(95, 65, 147);">
   <div style="background-color:#5f4193 !important; color:white;  height:32px;">
      <a id="kev_cphContent_lbCloseDitto" href="javascript:__doPostBack('kev$cphContent$lbCloseMyPage','')" style="font-size:23px; color:white; text-shadow: 0 1px 0 #fff; padding-right:4px; text-decoration:none; cursor:pointer; float:right;">×</a>
   </div>
   <iframe src="http://page.mysite.org/Default.aspx" id="myframe" style="width: 104%; height: 604px;" frameborder="0"></iframe>
</div>

两者都是用同一段代码创建的：

        function setIframe(element, location) {
            url = 'http://page.mywebsite.org/Default.aspx?' + location;
            $('<iframe>', {
                src: url,
                id: 'dittoframe',
                width: '100%',
                height: '600px',
                frameborder: 0,
            }).appendTo('#kev');
            $("#main_data").hide();
            $("#kev").show();
        }

任何人都可以告诉我如何强制Firefox将其保持在100％？

由于

Answer 1

当你回顾它时，它是一个简单的。

在创建iframe后立即添加以下代码

function setIframe(element, location) {
            url = 'http://page.mywebsite.org/Default.aspx?' + location;
            $('<iframe>', {
                src: url,
                id: 'dittoframe',
                width: '100%',
                height: '600px',
                frameborder: 0,
            }).appendTo('#kev');
            $("#main_data").hide();
            $("#kev").show();
            $("#myframe").css("width", "100%"); // <- set the width to 100% immediately
        }

这会立即调整iframe的大小，即使它可能尚未加载，并且它在Firefox中显示为预期。

Firefox iframe超出宽度

1 个答案: