Question

我有一个页面里面有iframe个元素。此iFrame中包含两个document级别。

以下是代码的简短版本（删除大部分内容，否则会过大）

<iframe src="some soruce" width="863" height="486" frameborder="0" scrolling="no">
    <html>
        <head>...</head>
          <body>
              <iframe id="player" src="some source" width="863" height="486" frameborder="0" scrolling="no">
                <html>
                    <head>...</head>
                    <body>
                      <div id="mediaplayer_wrapper" style="position: relative; width: 863px; height: 486px;">
                        <object type="application/x-shockwave-flash" data="/new-flash-player/player.swf" width="100%" height="100%" id="mediaplayer" name="mediaplayer" tabindex="0"></div></div>
                      <div id="banners_area" style="position: absolute; top: 0px; left: 0px; width: 863px; height: 486px; display: none; background-color: white;">
                              <br>
                      </div>
                    </div>
                    </body>
                </html>             
              </iframe>
        </body>
    </html>
</iframe>

我想要做的是通过jQuery访问mediaplayer对象并触发一个函数。我尝试过以下方法：

var p = jQuery("mediaplayer");
p.hideGate();

以及

var p = $("#iFrame").contents().find("#mediaplayer");
p.hideGate();

但他们都没有奏效。（给了我一个hideGate未定义的错误。但是当我在开发人员之下切换到该特定播放器的内容并执行第一个代码时，它突然起作用。

我在这里做错了什么？为什么我不能触发这个功能？

Answer 1

hideGate不是标准的jQuery方法。它必须由插件提供。

您有多个文档，并且该插件被加载到带有#mediaplayer元素的框架文档中的jQuery版本。

当您从父框架调用jQuery时，您正在使用jQuery的版本... 不安装了该插件。

您可以通过将插件脚本加载到父框架中的文档来解决此问题。

如果失败，您需要从框架中的文档调用jQuery函数。（可能$("#iFrame")[0].contentWindow.jQuery("#mediaplayer")会这样做，但我现在没有时间编写测试用例以确定。

Answer 2

也许您想尝试 .contentWindow 属性，如下所示：http://www.w3schools.com/jsref/prop_frame_contentwindow.asp

希望它有所帮助。

iFrame中的jquery访问元素

2 个答案: