如何使用Javascript调整iframe的宽度？

<div style="width: 550px;" id="zuora_payment"> 
    <div style="display: inline;" class="z-overlay" id="z-overlay"></div> 
    <div class="z-container" id="z-container"> 
     <div class="z-data" id="z-data"> 
      <iframe style="display: block;" class="z_hppm_iframe" allowtransparency="true" scrolling="no" overflow="visible" id="z_hppm_iframe" src="https://www.zuora.com/allowtransparencypps/PublicHostedPageLite.do?..." frameborder="0" height="912" width="300"> 
      </iframe> 
     </div> 
    </div> 
</div>

我曾尝试：document.getElementById('z_hppm_iframe').setAttribute("style","width:500px");如何使用Javascript调整iframe的宽度？

我只需要调整的IFRAME元素的宽度，但它显示在控制台为空，所以我想我没有选择正确的元素。

感谢您提供任何帮助。

所述iFrame内的

$(document).ready(function() {}

这是在页面的头动态添加。所以我怀疑它在运行.setAttribute（）的时候是不可用的，它位于主体尾部的脚本标记内。我在这方面做得并不多（因为你可以说），所以我只需要弄清楚如何在iframe添加后运行这一行js（我猜）。

来源

2015-10-06 Kirk B

有你试过'setAttribute（'width'，'500px'）'？ – Coderchu

当你试图修改它时，你确定该元素是可用的吗？尝试将代码包装在'window.load = function（）{}' –

您打开了浏览器控制台吗？ – baao

问题是，您正试图在元素被浏览器渲染之前使用它。

您应该在结束body标记之前将您的<script>标记置于其中。

另一种解决方案是使用DOMContentLoaded事件，如：

document.addEventListener('DOMContentLoaded', function() { 
    document.getElementById('z_hppm_iframe').setAttribute("style", "width:500px"); 
});

我建议你做style.width = '500px';，而不是通过属性做改变宽度，因为这样做你的方式， style属性将被完全替换。

来源

2015-10-06 22:52:21 Buzinas

因此函数内部应该如下所示：document.getElementById（'z_hppm_iframe'）。style.width ='500px'; –

@KirkB正好！ – Buzinas

问题是，您正尝试在浏览器呈现它之前使用该元素。

^那么只涉及OP的方法尝试。但是，由于Iframe是动态添加的，并且因为不需要渲染DOM来操作对象，所以他实际上不需要将其标记移动到页面的底部。因此，我们不能说这是问题的根源。

作为对OP ...

所述iFrame动态添加...

因为 “宽度” 在技术上是一个属性和 “风格”，另一个...

var iframe = document.create('iframe'); 
iframe.width = 500; 
//or 
iframe.style.width = '500px';

希望这可以帮助

来源

2015-10-15 15:35:02 Sparkida

如何使用Javascript调整iframe的宽度？

回答

相关问题