记一次浏览器js代码调试问题

原创于 2021-11-11 16:20:48 发布 · 601 阅读

CC 4.0 BY-SA版权

文章标签：

在网页开发中，当元素位于iframe内时，通过常规方法如document.getElementById()无法直接获取到该元素。这是因为浏览器的安全限制，iframe内的元素并不属于父页面的document。解决这个问题的关键在于，需要先获取到iframe本身，然后通过iframe的contentWindow属性访问其内部的document，再进行元素查找。例如，可以使用`document.getElementById(myIframe).contentWindow.document.getElementById(mySpan)`来获取iframe中的特定元素。

现象：浏览器端通过开发者工具，无法通过document.getElementById()等方式获取到元素，但通过审查元素点击该元素后，再通过document.getElementById()等方式却能获取到元素。

原因：该元素在页面的iframe中，需要而当前Window的document只包含当前页面元素，不包含iframe中的元素，所以如果需要获取到iframe中的元素，需要首先获取到iframe中的document，然后通过该document 再获取对应元素。例如：document.getElementById("myIframe").contentWindow.document.getElementById("mySpan");

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
</head>
<body>
<span>页面span</span>

<iframe id="myIframe">
    <span id="mySpan">iframe中的span</span>
</iframe>

</body>
</html>