HTML：如何使用javascript变量或函数设置iframe的src

Question

我有三个html文件，html是显示3D模型图像的菜单页面，用户可以在其中单击并将它们定向到带有该3D模型描述的html。

如您所见，此"href"还带有一些参数，html需要这些参数来定位相机视图，以便用户看到3D模型的特定角度。 现在，它的描述页面的html在iframe上有html。

我希望 html 能够从 html 接收这些参数并将其传递给 html。

我认为通过以这种方式声明 src："document.getElementById("pooliframe"(.src = address;"它会在 iframe 的 src 标签上写入地址变量，但我收到此错误： 未捕获的类型错误：无法将属性"src"设置为 null 对于此代码行：document.getElementById("pooliframe"(.src = 地址;

请帮帮我!!

Answer 1

确保在实际的#pooliframe元素之后包含脚本。getElementById可能会返回null，因为该元素尚不存在。此代码段演示：

<script type="text/javascript">
// This will log `null` because #pooliframe does not exist here.
console.log(document.getElementById('pooliframe'));
</script>
<iframe id="pooliframe" allowfullscreen></iframe>
<script type="text/javascript">
// But it does exist here:
console.log(document.getElementById('pooliframe'));
</script>

如果尝试编写属性srcnull，则会收到此错误：

未捕获的类型错误：无法将属性"src"设置为 null

试试吧：

// Obviously "pooliframe" does not exist without HTML:
document.getElementById("pooliframe").src = 'some-address';

如果您无法控制 HTML 中的元素顺序，您还可以使用DOMContentLoaded事件来延迟脚本的执行，直到 DOM 完全解析：

<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function() {
console.log(document.getElementById('pooliframe'));
})
</script>
<iframe id="pooliframe" allowfullscreen></iframe>