我正在加载<;iframe>并尝试使用Javascript访问其中的元素,但当我尝试执行代码时,出现以下错误:
SecurityError:阻止具有原点的帧http://www.<“;domain>;.com”访问跨原点帧。
你能帮我找到一个解决方案,这样我可以访问框架中的元素吗
我使用此代码进行测试,但徒劳:
$(文档).ready(函数(){
var iframeWindow=document.getElementById(“我的iframe id”).contentWindow;
iframeWindow.addEventListener(“加载”,函数(){
var doc=iframe.contentDocument | | iframe.contentWindow.document;
var target=doc.getElementById(“我的目标id”);
target.innerHTML=“找到了!”;
});
});
同一原产地政策
无法访问<;iframe>来源不同,如果您能够做到这一点,它将是一个巨大的安全漏洞。对于同源策略浏览器阻止脚本尝试访问具有不同来源的帧
如果地址的以下部分中至少有一部分未保留,则认为来源不同:
协议://主机名:端口/…
如果要访问帧,则协议、主机名和端口必须与域相同
注意:众所周知,Internet Explorer并不严格遵守此规则,有关详细信息,请参见此处。
例子
下面是从http://www.example.com/home/index.html
URL结果
http://www.example.com/home/other.html -&燃气轮机;成功
http://www.example.com/dir/inner/another.php -&燃气轮机;成功
http://www.example.com:80 -&燃气轮机;成功(HTTP的默认端口)
http://www.example.com:2251 -&燃气轮机;失败:不同的端口
http://data.example.com/dir/other.html -&燃气轮机;失败:不同的主机名
https://www.example.com/home/index.html:80 -&燃气轮机;失败:不同的协议
ftp://www.example.com:21 -&燃气轮机;失败:不同的协议&;港口城市
https://google.com/search?q=james+债券->;故障:不同的协议、端口和;主机名
变通办法
即使同源策略阻止脚本访问具有不同来源的站点的内容,如果您拥有这两个页面,您也可以使用window.postMessage及其相关messageevent在这两个页面之间发送消息,如下所示:
-
在主页中:
const frame=document.getElementById('your-frame-id'); frame.contentWindow.postMessage(/*此处的任何变量或对象*/,'http://your-second-site.com');postMessage()的第二个参数可以是'*',以指示对目标的来源没有偏好。在可能的情况下,应始终提供目标来源,以避免泄露您发送到任何其他站点的数据 -
在您的
中<;iframe>(包含在主页中):window.addEventListener('message',event=>{
//重要提示:检查数据的来源!
if(event.origin.startsWith('http://your-first-site.com')) {
//数据是从您的站点发送的。
//使用postMessage发送的数据存储在event.Data中:
console.log(事件数据);
}否则{
//数据不是从您的站点发送的!
//小心!不要用它。这是另一个分支
//为了清楚起见,你通常不需要它。
回来
}
});
此方法可以在两个方向上应用,也可以在主页中创建侦听器,并从框架接收响应。同样的逻辑也可以在弹出窗口和主页生成的任何新窗口(例如使用window.open())中实现,没有任何区别
在浏览器中禁用同源策略
关于这个主题已经有一些很好的答案(我刚刚发现他们在谷歌上搜索),因此,对于可能的浏览器,我将链接相关的答案。但是,请记住,禁用同源策略只会影响您的浏览器。此外,禁用同源安全设置后运行浏览器将授予任何网站对跨源资源的访问权,因此这是非常不安全的,如果您不确切知道自己在做什么(例如开发目的),则不应这样做
- 谷歌浏览器
- Mozilla Firefox
- 狩猎
- 歌剧院
- Microsoft Edge:不可能
- Microsoft Internet Explorer