我有一个名为 first.html 的 html 文件，它有一个 iframe 元素来加载另一个名为 second.html 的 html 文件。我们如何在这两个 html 文件之间进行通信。我试图从 second.html 触发一个事件并在 first.html 上捕获相同的事件。但是事件传播不成功。
这是first.html文件
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js" />
<script>
function onLoad(){
alert("onLoad");
var iframe = $('#iframeID').contents();
iframe.find("#button").on("SUBMIT",function(){
// business logic
alert("Clicked");
});
}
</script>
</head>
<body>
<iframe id="iframeID" onload="onLoad()" height="1000" width="1000" src = './second.html'></iframe>
</body>
</html>
这是second.html文件
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js" />
<script>
function myFunction(){
$('#button').trigger("SUBMIT");
};
</script>
</head>
<body>
<button id="button" type="button" onclick="myFunction()">Click me</button>
</body>
</html>
最佳答案
你不能用jquery来交流， 因为事件冒泡停止在文档的根目录，即 iframe 容器，并且不会到达主机文档。 您可以使用发布消息进行交流。
试试这段代码吧。
这是 first.html 文件。
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script>
// addEventListener support for IE8
function bindEvent(element, eventName, eventHandler) {
if (element.addEventListener){
element.addEventListener(eventName, eventHandler, false);
} else if (element.attachEvent) {
element.attachEvent('on' + eventName, eventHandler);
}
}
// Listen to message from child window
bindEvent(window, 'message', function (e) {
alert("Got the message from child");
});
</script>
<body>
<iframe name="iframeID" height="1000" width="1000" src = './second.html'></iframe>
</body>
</html>
second.html
<!DOCTYPE html>
<html>
<body>
<head>
<button id="button" type="button" onclick="myFunction()">Click me</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"/>
<script>
function myFunction(){
var message = 'Send the message to parent ';
window.parent.postMessage(message, '*');
};
</script>
</body>
</html>
关于javascript - 使用 IFrame 在 jQuery 中进行事件传播，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56422675/