【问题标题】:Load iframe and target content加载 iframe 和目标内容
【发布时间】:2011-09-09 22:47:16
【问题描述】:

我有一个将 iframe 写入页面的脚本。 我想定位这个 iframe 内的链接以具有功能。 问题是: 编写 iframe 后,我使用以下代码:

$('#iframe_pin').load(function () {
            $(this).contents().find('a.close').click(function (event) {
                event.preventDefault();
                $('.loaded').fadeOut(fade_time).remove();
            })
        })

它不起作用。 但是如果我在加载函数之后发出警报,就像这样:

$('#iframe_pin').load(function () {alert('bla bla');
            $(this).contents().find('a.close').click(function (event) {
                event.preventDefault();
                $('.loaded').fadeOut(fade_time).remove();
            })
        })

有效!

当然我不能在代码中保留警报:)

谁能帮帮我?

【问题讨论】:

  • 你的 html 是什么?你能在jsbin.com 上贴一个例子吗?我不明白#iframe_pin.loaded 是什么,女巫是<iframe>
  • ifram_pin 是 iframe;加载的是一个div;使用“.contents()”我将元素定位到 iframe,但它的行为就像它没有完全加载,除非我在“加载”函数之后立即发出警报
  • 所以:<div class="loaded"><iframe id="iframe_pin" ...></div> ?
  • 没错,我想定位“a.close”来关闭包含 iframe 的 div
  • 这个.load放在哪里? -- 当 DOM 在父节点中准备好时,它应该立即设置。

标签: javascript jquery iframe jquery-events dom-manipulation


【解决方案1】:

从 cmets 你有类似的东西:

<div class="loaded">
    <iframe id="iframe_pin" src="abc.html" width="100%" height="100%">
</div>

所以,你需要做的就是:

$("#iframe_pin").load(function() {

    // let's get the iframe source
    var iframe = $("#iframe_pin").contents();

    iframe.find("a.close").bind("click", function() {
        $(".loaded").fadeOut('slow', function() {
            // now that the FadeOut is finished, let's remove
            $(".loaded").remove();
        });
        return false; // let's prevent to jump in the click
    });
});

my own space 的工作示例


Example 2 通过动态创建&lt;iframe&gt;


Example 3 通过动态创建&lt;iframe&gt;,删除它们并重新创建它们

【讨论】:

  • 还是不行。我认为这是因为 iframe 是在运行时用另一个函数编写的
  • 我的示例代码有效,只是添加了第二个版本,所以你看到我也在动态创建&lt;iframe&gt;
  • 如果你想感谢,记得upvote这个问题,如果这是你所追求的,换句话说,如果答案是正确的,则将答案设为正确。跨度>
  • thnx balexandre,你的帖子完美无缺,我必须更好地检查我的代码,某处应该有一些错误
  • 添加了第三个示例,您可以在其中动态创建 &lt;iframe&gt;,将其删除并一次又一次地重新创建...
猜你喜欢
  • 2015-04-28
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2016-02-11
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多