【JavaScript】frame跨域访问元素

什么是跨frame访问元素呢？比如main.html中有如下代码：

<frameset cols="50%,*">
  <frame src="frame1.html">
  <frame src="frame2.html">
</frameset>

如果想在frame2.html的页面操作frame1.html中的元素，那么通过如下的js代码就可以完成：

parent.frames[0].document

其中parent表示访问main.html的文档。frames[0]表示访问main.html中的第一个frame对象，也就是frame1.html页面。也可以通过name来指定访问特定的页面，例如：

<frameset cols="50%,*">
  <frame name="myframe1" src="frame1.html">
  <frame name="myframe2" src="frame2.html">
</frameset>

frame2.html中的访问代码就可以改为：

parent.frames["myframe1"].document

 

到这里我们知道了frame之间如何访问元素，笔者这里只是列举了一种方法，有兴趣的读者可以自行googling。那么什么是跨域访问元素呢？

若我们把上面main.html中的一个frame指向其它的域名地址（比如：www.google.com），那么我们还能正常在myframe2中操作myframe1中的元素吗？

<frameset cols="50%,*">
  <frame name="myframe1" src="www.google.com">
  <frame name="myframe2" src="frame2.html">
</frameset>

答案是不行！在myframe2中操作myframe1中的元素，会得到如下的错误信息：frame Blocked a frame with origin "null" from accessing a cross-origin frame.

浏览器是禁止这种行为的。那么有没有什么方法可以实现这种操作呢？

答案是有的，解决方法有多种，笔者稍后会把链接粘贴在后面。这里笔者说一下，笔者可行方法（就是禁用浏览器的安全域检查）：

笔者的Chrome是75.0.3770.142，环境是win7。

然后使用如下的命令启动chrome浏览器：

chrome.exe --disable-site-isolation-trials --disable-web-security --user-data-dir="your dir"

 

读者可以翻阅下面的链接，查看更详细的说明

1.Disable same origin policy in Chrome

2.blocked a frame of origin “null” from accessing a cross-origin frame - chrome