iframe子页面对父页面进行的操作的jQuery方式，解决报错：Uncaught DOMException: Blocked a frame with origin "null" from ..._jquery uncaught domexception: blocked a frame-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_41638795/article/details/97789748

本文介绍了如何在jQuery中处理iframe子页面改变父页面iframe src属性并相应更新导航样式的问题。当在本地直接用浏览器打开页面时，可能会遇到跨域错误`Uncaught DOMException: Blocked a frame with origin "null" from accessing a cross-origin frame.`。为解决此问题，可以将代码部署到服务器上。文章提供了简单的服务器创建步骤，并展示了在服务器上运行时如何正常工作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在项目中，一个页面中可能会通过<iframe>标签引入另外一个页面，这两个页面简称为父页面和iframe子页面。然后，会通过点击导航（导航样式改变），iframe引入不同的页面，显示不同的内容。当有时可能需要在iframe子页面进行iframe的src改变（即引入另一个页面），同时相应导航样式也需要改变。简单例子如下：

效果图：

1. 父页面代码如下：parent.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <link rel="stylesheet" href="">
    <style>
	*{margin: 0;padding: 0;list-style: none}
	ul.nav{ overflow: hidden; }
	li{ float: left;  padding: 10px 35px; background: #04b06d;  color: #ffff; border-right: 1px solid #fff;}
	li.active{ background: #40735f; }
    </style>
</head>
<body>
    <div class="wrap">
	<ul class="nav">
	    <li class="li_a active" onclick="navF(this,'a.html')">a页面</li>
	    <li class="li_b" onclick="navF(this,'b.html')">b页面</li>
	    <li class="li_c" onclick="navF(this,'c.html')">c页面</li>
	</ul>
	<iframe id="iframe" src="a.html"></iframe>
    </div>

    <script src="jquery-1.10.2.min.js"></script>
    <script>
	function navF(e,page){
            $('#iframe').attr('src',page);
	    $(e).siblings('li').removeClass('active')
	    $(e).addClass('active');
	}
    </script>
</body>
</html>

当想从a页面操作跳转到b页面时，也就是由子页面改变父页面的iframe标签的src属性值。其jQuery实现方式为： $(window.parent.document).find("#iframe").attr('src','b.html');，而js原生实现方式为：window.parent.document.getElementById('iframe').src = 'a.html'。

同时改变导航栏的样式，看如下代码。

a页面：a.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <link rel="stylesheet" href="">
</head>
<body>
    a页面a页面a页面
    <button onclick="jump()">跳转</button>

    <script src="jquery-1.10.2.min.js"></script>
    <script>
	function jump(){//跳转到b页面
	    $(window.parent.document).find("#iframe").attr('src','b.html'); 
	    $(window.parent.document).find(".nav li").removeClass('active'); //导航样式改变
	    $(window.parent.document).find(".nav li.li_b").addClass('active');
	}
    </script>
</body>
</html>

b,c页面：b.html、c.html （差不多，只是显示内容不一样）

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <link rel="stylesheet" href="">
</head>
<body>
    b页面b页面b页面
</body>
</html>

当点击a页面的跳转按钮，会发现可能会报错：Uncaught DOMException: Blocked a frame with origin "null" from accessing a cross-origin frame.

原因可能是，你是在本地直接用浏览器打开页面的。只要把代码放到服务器上运行就没问题了。

简单创建一个服务器，进行测试。如下

（前提安装了node.js：https://www.runoob.com/nodejs/nodejs-install-setup.html）

创建一个文件夹server，进入该文件夹，打开命令行窗口，依次输入如下命令：

npm install express-generator -g
express -e server
cd server
npm install
npm start

在浏览器中打开http://localhost:3000/ ，如下代表服务器创建成功。

接着，将html文件放到server根目录的public目录下，如下

然后在浏览器打开http://localhost:3000/parent.html 即可，如下，点击“跳转”按钮，就可以转到b页面了