Question

<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");

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

感谢您提供任何帮助。

iFrame是在

中动态添加的

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

位于页面的头部。所以我怀疑它在.setAttribute（）运行时不可用，它位于正文末尾的脚本标记内。我在这方面做得不多（正如你所知道的那样），所以我只需要弄清楚如何在添加iframe之后运行这行js（我猜）。

Answer 1

问题是你在浏览器呈现之前尝试使用该元素。

您应该在结束<script>标记之前放置body标记。

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

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

我建议您通过执行style.width = '500px';而不是按属性来更改宽度，因为按照您的方式行事，style属性将完全替换。

Answer 2

问题是你在浏览器呈现之前尝试使用该元素。

^嗯，这只涉及OP尝试的方法。但是，由于动态添加了Iframe，并且因为不需要渲染DOM以操纵对象，所以他实际上不需要将他的＆lt; script＆gt; 标记移动到底部这页纸。因此，我们不能说这是问题的根源。

关于OP ...

动态添加iFrame ...

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

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

希望这有助于

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

2 个答案: