我试图从另一个框架调用一个函数，但我似乎无法穿过 dom，对吧？难道我做错了什么？
indes.html代码:
<frameset rows="25%, 75%">
<frame src="top.html"></frame>
<frameset cols="50%, 50%">
<frame src="frame_left.html" name="left_frame">
<frame src="frame_right.html" name="right_frame">
</frameset>
</frameset>
在 top.html 中我有:
<body>
<h1>Top Frame</h1>
<button onclick="clicked()">Click me !</button>
<script type="text/javascript">
function clicked() {
console.log("you clicked");
console.log(top.frames["left_frame"].left());
}
</script>
</body>
frame_left.html 我有:
<body>
<h3>Frame left</h3>
<script type="text/javascript">
function left() {
console.log("You called the left function from left frame");
}
</script>
</body>
我收到此错误:
top.html:12 未捕获的安全错误:阻止来源为“null”的框架访问来源为“null”的框架。协议(protocol)、域和端口必须匹配。
最佳答案
您可以使用postMessage如果您是所有框架的所有者
窗口 1 - 接收
window.addEventListener("message", receiveMessage, false);
function receiveMessage(event)
{
var origin = event.origin || event.originalEvent.origin;
// For Chrome, the origin property is in the event.originalEvent object.
if (origin !== "http://example.org:8080")
return;
// ...
}
窗口 - 2 传输
var popup = window.open(...popup details...);
popup.postMessage(
"The user is 'bob' and the password is 'secret'",
"https://secure.example.net"
);
编辑2 刚刚尝试过这个代码片段对我有用:
父框架:
(function() {
// ******** Attn : Please specify the domain2 where the iframe is located; ***********
var originToConnect = 'http://<childDomain>/';
//a dummy message from child iframe will trigger this receiveChildMessage function
//This inturn will act as a callback to send its location again using postMessage
var receiveChildMessage = function(e){
console.log('Parent: Request received from child');
document.getElementById('logging').innerHTML += '<span>Parent:</span><br/> Request received from child<hr/>';
var iframe = window.frames['iframe1'];
iframe.postMessage(window.top.location.href,originToConnect);//acts like callback and send loc to child
console.log('Parent: Sending Location info to child');
document.getElementById('logging').innerHTML += '<span>Parent:</span><br/> Sending Location info to child<hr/>';
};
if (typeof window.addEventListener !== 'undefined') {
window.addEventListener('message', receiveChildMessage, false);
} else {
window.attachEvent('onmessage', receiveChildMessage);
}
})();
内框:
(function() {
// ******** Attn : Please specify the domain1 where the main file(parent domain I used "server1") is located;***********
var originToConnect = 'http://<parentDomain>/';
console.log('Child: Sending request to parent');
document.getElementById('logging').innerHTML += '<span>Child:</span><br/> Sending request to parent<hr/>';
//Posting a dummy message to trigger onmessage on the parent window
//the parent in turn will post a different message where it is programmed to send its location
//then will be received in this iframe receiveParentMessage() method
parent.window.postMessage('Give Me your co-ordinates',originToConnect);
var receiveParentMessage = function(e){
console.log('Child: Message received from parent');
document.getElementById('logging').innerHTML += '<span>Child:</span><br/> Message received from parent<hr/>';
console.log('Child: Print Window location = '+e.data);
document.getElementById('msg').innerHTML = '<span>Child:</span><br/> Printing Parent Window location:<br/><br/><b>'+e.data+'</b><hr/>';
};
if (typeof window.addEventListener !== 'undefined') {
window.addEventListener('message', receiveParentMessage, false);
} else {
window.attachEvent('onmessage', receiveParentMessage);
}
})();
您必须创建另一对才能进行相互通信。
关于javascript - 如何访问内框Html？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36875901/