本地测试child.html向parent.html传值遇跨域问题求助

你在本地直接打开HTML文件（使用file://协议）时遇到的跨域问题，是浏览器同源策略的安全限制导致的——不同本地文件会被浏览器判定为不同域，所以opener.document的访问请求会被拦截。下面给你几个可行的解决方案：

一、使用本地HTTP服务器运行（最推荐） #

把HTML文件放在本地服务器环境下运行，两个页面会统一使用http://localhost协议，属于同源范围，自然就不会触发跨域限制了。这里提供两种简单的搭建方式：

• Python 3：打开终端，进入HTML文件所在目录，运行命令：

  python -m http.server 8000
  

  之后在浏览器访问http://localhost:8000/Parent.html，再测试功能就能正常运行。
• Node.js：先全局安装http-server工具（需提前安装Node.js）：

  npm install -g http-server
  

  进入文件目录后运行：

  http-server
  

  按照终端提示的地址访问页面即可。

二、临时修改浏览器跨域限制（仅用于本地测试） #

如果不想搭建服务器，可以临时关闭浏览器对file://协议的同源限制，注意：不要用修改后的浏览器访问互联网，存在安全风险：

• Chrome/Edge：找到浏览器快捷方式，右键选择「属性」，在「目标」栏末尾添加 --allow-file-access-from-files（注意前面有一个空格），确定后重启浏览器，再打开本地HTML文件。
• Firefox：在地址栏输入about:config，点击「接受风险并继续」，搜索security.fileuri.strict_origin_policy，将其值改为false。

三、代码小优化（不影响跨域，但优化DOM结构） #

另外注意你的Child.html代码里有一个多余的</b>标签，建议修正避免DOM解析问题：
原代码：

<font size="5" color="gray">childWindow</font></b>

修改为：

<b><font size="5" color="gray">childWindow</font></b>

或者直接移除多余的</b>标签。

完成以上处理后，你的子窗口向父窗口传值的功能就能正常工作了。

内容的提问来源于stack exchange，提问作者정순태