Question

index.html使用此代码

<iframe src="other.html" width="100%" height="600px"></iframe>

<input type="button" id="btnOutside" value="Click me"/>

在other.html中我有这段代码：

<input type="button" id="btnInside" value="Other Click"/>
<script type="text/javascript">
$(document).ready(function() {
    $("#btnInside").click(function () {
        alert('inside');
    });
});
</script>

我试图让外部按钮触发index.html中的内部按钮

<script type="text/javascript">
$(document).ready(function() {
    $("#btnOutside").click(function () {
        $("#btnInside").click();
    });
});
</script>

但是不行。我该怎么办？

Answer 1

不同的iframe具有不同的上下文和文档：当您调用$('#btnInside')时，jQuery正在主机iframe中执行并查看该文档，因此无法找到它。如果嵌套的iframe位于同一服务器上，则可以从主机文档隧道传输到其文档：

$(document).ready(function() {
    $("#btnOutside").click(function () {
        $('iframe[src="other.html"]').contents().find("#btnInside").click();
    });
});

如何使用js或jQuery与iframe的内容进行交互

1 个答案: