JavaScript-跨网域iframe issu
可以说，我有一个名为example.com的站点，在该站点上嵌入了iframe.net域的iframe，现在我想读取iframe的内容并传递一些参数以显示文本消息。 像Hi和用户名一样。
现在的问题是这无法建立两者之间的连接，甚至无法获得我使用以下方法使用的iframe的innerHTML
document.getElementById('myframe').contentWindow.document.body.innerHTML;
它将引发错误“权限被拒绝访问属性”
有谁知道如何在跨域平台中读写
Kunal Vashist asked 2020-08-10T14:23:56Z
4个解决方案
52 votes
如果您无法控制框架网站，则无法规避跨域策略。
如果您可以控制两个站点，则可以使用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('','*');
4 votes
在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','*');
0 votes
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;
}
0 votes
在React中使用（srcDoc）访问跨域iframe元素：-
<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();
}