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

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();
    });
});