iframe交互问题，浏览器存在差异

最新推荐文章于 2024-08-19 02:10:36 发布

黄宝康

最新推荐文章于 2024-08-19 02:10:36 发布

阅读量1.8k

点赞数

分类专栏： html 文章标签： iframe交互浏览器间的差异

本文链接：https://blog.csdn.net/huangbaokang/article/details/79880667

版权

html 专栏收录该内容

29 篇文章 3 订阅

订阅专栏

搞前端的都知道，iframe存在跨域访问的问题。
在不同浏览器中，google浏览器出于安全考虑，对于file协议有安全限制，无法用js访问本地资源。

为了说明不同浏览器间iframe访问的差异，我将举例说明。

huangbaokang.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>iframe交互问题</title>
</head>
<body>
  <script type="text/javascript">
  function modify(){
    var iframe_doc = document.getElementById("ifr_id").contentDocument;
    iframe_doc.getElementById("child_id").innerHTML = "张露露";
  }
  </script>
  <button onclick="modify()">改变iframe的值</button>
  <iframe id="ifr_id"src="zhanglulu.html"></iframe>
</body>
</html>

代码比较简单，body里只有一个button按钮和iframe元素，通过点击按钮改变内嵌iframe里面的值。

zhanglulu.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内嵌页面</title>
</head>
<body>
    <label id="child_id">黄宝康</label>
</body>
</html>

访问huangbaokang.html在谷歌浏览器中，页面如下：

这里写图片描述

点击按钮，在谷歌浏览器控制台报了一个错，iframe中的值并没有改成张露露：

Uncaught DOMException: Failed to read the ‘contentDocument’ property from ‘HTMLIFrameElement’: Blocked a frame with origin “null” from accessing a cross-origin frame.
at modify (file:///C:/Users/yangfeng/Desktop/huangbaokang.html:10:55)
at HTMLButtonElement.onclick (file:///C:/Users/yangfeng/Desktop/huangbaokang.html:14:30)

同样在360浏览器也报了这个错。

在IE9浏览器中，却可以改变内嵌iframe中的值，而且浏览器控制台中没有报错信息。

这里写图片描述