我想使用jQuery在iframe中操纵HTML。

我想我可以通过将jQuery函数的上下文设置为iframe的文档来实现这一点,比如:

$(function(){ //document ready
    $('some selector', frames['nameOfMyIframe'].document).doStuff()
});

然而,这似乎不起作用。一点检查显示,帧['nameOfMyIframe']中的变量未定义,除非等待一段时间加载iframe。然而,当iframe加载时,变量是不可访问的(我得到了拒绝权限的类型错误)。

有人知道这方面的工作吗?


当前回答

如果<iframe>来自同一个域,则元素很容易作为

$("#iFrame").contents().find("#someDiv").removeClass("hidden");

参考

其他回答

我更喜欢使用其他变体进行访问。从父级可以访问子级iframe中的变量。$也是一个变量,您可以访问它的调用window.iframe_id$

例如,window.view.$('div').hide()-隐藏iframe中id为'view'的所有div

但是,它在FF中不起作用。为了更好的兼容性,您应该使用

$('#iframe_id')[0].contentWindow$

可以使用jQuery的.contents()方法。

如果iframe与主页位于同一域,则.contents()方法也可用于获取iframe的内容文档。

$(document).ready(function(){
    $('#frameID').load(function(){
        $('#frameID').contents().find('body').html('Hey, i`ve changed content of <body>! Yay!!!');
    });
});

我认为你所做的一切都要遵守同一原产地政策。这应该是您收到拒绝权限类型错误的原因。

如果下面的代码不起作用

$("#iFrame").contents().find("#someDiv").removeClass("hidden");

以下是使其工作的可靠方法:

$(document).ready(function(){ 
  setTimeout(
    function () {
      $("#iFrame").contents().find("#someDiv").removeClass("hidden");
    },
    300
  );
});

这样,脚本将在300毫秒后运行,因此它将有足够的时间加载iFrame,然后代码将生效。有时iFrame不会加载,脚本会在它之前执行。300ms可以根据您的需要调整为任何其他值。

您需要将事件附加到iframe的onload处理程序,并在其中执行js,以便在访问iframe之前确保iframe已完成加载。

$().ready(function () {
    $("#iframeID").ready(function () { //The function below executes once the iframe has finished loading
        $('some selector', frames['nameOfMyIframe'].document).doStuff();
    });
};

以上内容将解决“尚未加载”的问题,但关于权限,如果您在iframe中加载来自不同域的页面,则由于安全限制,您将无法访问该页面。