[英]Cross domain iframe issue
例如,我有一个名为 example.com 的站点,其中 iframe 嵌入了域 iframe.net,现在我想阅读 iframe 的内容并传递一些参数以显示文本消息。 喜欢用户名的嗨。
现在的问题是这无法在两者之间建立联系,甚至无法获得 iframe 的内部HTML 我使用了以下方法
document.getElementById('myframe').contentWindow.document.body.innerHTML;
它抛出错误“访问属性的权限被拒绝”
有谁知道跨域平台读写
如果您无法控制框架站点,则无法绕过跨域策略。
如果您可以控制这两个站点,则可以使用postMessage
方法跨不同域传输数据。 一个非常基本的例子:
// framed.htm:
window.onmessage = function(event) {
event.source.postMessage(document.body.innerHTML, event.origin);
};
// Main page:
window.onmessage = function(event) {
alert(event.data);
};
// Trigger:
// <iframe id="myframe" src="framed.htm"></iframe>
document.getElementById('myframe').contentWindow.postMessage('','*');
在Internet Explorer 8 中,作为参数传递的事件可能为null ,这就是您需要以不同方式访问事件的原因:
在frame.html 中:
window.onmessage = function(event) {
var evt = event || window.event;
evt.source.postMessage('Message from iFrame', evt.origin);
};
在main.html 上:
window.onmessage = function(event) {
var evt = event || window.event;
alert(evt.data);
};
该事件的触发方式与 Rob W 介绍的相同:
document.getElementById('frameId').contentWindow.postMessage('message','*');
iFrame 不允许从跨域平台访问内容。 您只能在 iFrame 使用相同域时访问。
此解决方案的工作原理与 iFrame 相同。 我创建了一个 PHP 脚本,可以从其他网站获取所有内容,最重要的部分是您可以轻松地将自定义 jQuery 应用于该外部内容。 请参考以下脚本,可以从其他网站获取所有内容,然后您也可以应用您的自定义 jQuery/JS。 此内容可以在任何元素或任何页面内的任何地方使用。
<div id='myframe'>
<?php
/*
Use below function to display final HTML inside this div
*/
//Display Frame
echo displayFrame();
?>
</div>
<?php
/*
Function to display frame from another domain
*/
function displayFrame()
{
$webUrl = 'http://[external-web-domain.com]/';
//Get HTML from the URL
$content = file_get_contents($webUrl);
//Add custom JS to returned HTML content
$customJS = "
<script>
/* Here I am writing a sample jQuery to hide the navigation menu
You can write your own jQuery for this content
*/
//Hide Navigation bar
jQuery(\".navbar.navbar-default\").hide();
</script>";
//Append Custom JS with HTML
$html = $content . $customJS;
//Return customized HTML
return $html;
}
React 中的跨域 iframe 元素访问(srcDoc):-
<iframe srcDoc={this.state.HTML} width='100%' id='iframetnd' onLoad={this.onclickinsideiframe}/>
onclickinsideiframe=()=>{
if(document.getElementById('iframetnd')!==null){
let iframe = document.getElementById('iframetnd');
let innerDocument = (iframe.contentDocument)
? iframe.contentDocument
: iframe.contentWindow.document;
let Obj = innerDocument.getElementsByClassName("navButtons")[0];
if(Obj !== undefined){
Obj.onclick = ()=>this.func();
}
}
}
func=()=>{
this.setState({page:2})
this.arrangeTest();
}
只有当您对两个站点都拥有控制权时才会发生
你可以使用postMessage
这是您如何应用它
首先,您可以将以下代码添加到要从中检索数据的站点
<script> function test() { document.getElementById('idMyIframe').contentWindow.postMessage("your message here", "*"); } </script> <iframe id="idMyIframe" onload="test()" src="http://example.otherdomaintosenddatato.com"></iframe>
第二步,您可以将此代码添加到您要向其发送消息或数据的其他域中
window.addEventListener("message", function (message) { if (message.origin == "http://firstdomain.com") { console.log(message) } });
请注意,您必须在 iframe 的 onload 属性上添加 test() 函数,因为如果该函数在 iframe 加载之前运行,它将变得无用并且不会发送数据
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.