无法获取iframe标签内的元素

问题描述

无法操作iframe内的元素

问题出现的环境背景及自己尝试过哪些方法

本地有两个文件:index.htmliframe1.html。本地运行index.html后通过iframe标签获取iframe1内部的元素。却无法获取。

相关代码

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <iframe src="iframe1.html" name="iframe1" id="iframe1"></iframe>
    <script type="text/javascript">
        console.log(document.getElementById('iframe1').contentDocument.getElementById('title'));
    </script>
</body>
</html>

iframe1.html

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <p id="title">frame1</p>
</body>
</html>

你期待的结果是什么?实际看到的错误信息又是什么?

在本地运行 index.html,我无法得到iframe1中的p标签。

阅读 12.9k
4 个回答
  1. 首先没跨域<iframe src="iframe1.html" name="iframe1" id="iframe1"></iframe>是相对路径,怎么会跨域呢?
  2. 需要等iframe加载完了。不然iframe都是空白的,怎么会获取到?

     iframe1.onload=function(){ console.log(document.getElementById('iframe1').contentDocument.getElementById('title'));}

评论不能贴图。这里标识的是作用域,这里写的和你的页面是同一个作用域吗?

clipboard.png

iframe没加载完,在iframe 的load 回调里试试, 而且跨域了...

window.frames["iframe1"].contentWindow.document.getElementById('title')

修改父页面代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<iframe src="iframe1.html" name="iframe1" id="iframe1" onload="aa()"></iframe>
<script type="text/javascript">
    function aa() {
        let iframe1 = document.getElementById('iframe1')
        console.log(iframe1.contentDocument.getElementById('title'))
    }
</script>
</body>
</html>

在iframe上加上onload属性指向方法aa(),在iframe加载完成后执行aa方法,即可获取到子页面的元素信息。

或者不修改html代码,使用iframe的onload属性

iframe1.onload = function () {
    console.log(iframe1.contentDocument.getElementById('title'))
}
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题