HTML：如何使用javascript变量或函数

Question

我有三个html文件，html（＃1）是显示3D模型图像的菜单页面，用户可以点击这些图像，然后使用该3D模型的描述将它们指向html（＃2）。

正如你所看到的那样＆＃34; href＆＃34;还带有一些html（＃3）需要定位摄像机视图的参数，以便用户查看3D模型的特定角度。 现在，它的描述页面的html（＃2）在iframe上有html（＃3）。

我希望html（＃2）能够从html（＃1）接收这些参数并将其传递给html（＃3）。

我认为通过这种方式声明src：＆＃34; document.getElementById（＆＃34; pooliframe＆＃34;）。src = address;＆＃34;它会写在iframe的src标记地址变量，但是我收到此错误： 未捕获的TypeError：无法设置属性＆＃39; src＆＃39;为null 对于此代码行：document.getElementById（＆＃34; pooliframe＆＃34;）。src = address;

请帮助我!!!

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>

如果您尝试将属性src写入null，则会收到此错误：

  

未捕获的TypeError：无法设置null的属性'src'

试一试：

// 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>