Question

信息：我工作了很长时间，我有一个包含iframe的网页。在iframe里面我已经从我自己的网站打开了一个页面（应用程序）。

问题：我试图从<div class = "ps-lightbox"> </ div>中获取iframe内的iframe。但我无法用jQuery弄清楚..

我知道这听起来令人困惑。但我希望你理解我的解释。

有谁知道如何解决这个问题？你可以节省我的一天..

Screenshot of the webpage＆lt;

Answer 1

您无法访问不属于iframe文档的元素。但是如果你有自己网站的iframe，那么window.postMessage可以做到这一点。

请考虑以下示例：

mainPage.html

<html>
    <head>
        <script type="text/javascript">
            window.addEventListener("message", function(evnet){
                 if(event.type === "GET_SOME_ELEMENT"){
                     var iframeWindow = document.getElementsById("iframe1")[0].contentWindow;

                     iframeWindow.postMessage("POST_SOME_ELEMENT", "TARGET_ORIGIN", {element: $(".some-element")}
                 }
             });
       <script/>
    </head>
    <body>
        <div class="some-element"/>
        <iframe id="iframe1" src="iframePage.html"/>
    </body>
</html>

iframePage.html

<html>
    <head>
       <script type="text/javascript">
          if(window.parent){
             window.parent.postMessage("GET_SOME_ELEMENT", "TARGET_ORIGIN");
             window.addEventListener("message", function(evnet){
                 if(event.type === "POST_SOME_ELEMENT"){
                      console.log(event.data.element);
                 }
             });
          }
       <script/>
    </head>
</html>

Answer 2

确切的问题是如何使用纯JavaScript而不是jQuery。

但我总是使用jQuery的源代码中可以找到的解决方案。它只是本行JavaScript的一行。

对我而言，它是最好的，易读的，甚至是获取iframe内容的最短途径。

首先获取您的iframe

var iframe = document.getElementById('id_description_iframe');

// or
var iframe = document.querySelector('#id_description_iframe');

然后使用jQuery的解决方案

var iframeDocument = iframe.contentDocument || iframe.contentWindow.document;

即使在Internet Explorer中也能正常工作 iframe对象的contentWindow属性。其他大多数浏览器使用contentDocument属性，这就是我们证明的原因此属性首先在此OR条件下。如果没有设置尝试 contentWindow.document。

在iframe中选择元素

然后，您通常可以使用getElementById()甚至querySelectorAll()从iframeDocument中选择DOM元素：

if (!iframeDocument) {
    throw "iframe couldn't be found in DOM.";
}

var iframeContent = iframeDocument.getElementById('frameBody');

// or
var iframeContent = iframeDocument.querySelectorAll('#frameBody');

在iframe中调用函数

只获取window中的iframe元素来调用一些全局函数，变量或整个库（例如jQuery）：

var iframeWindow = iframe.contentWindow;

// you can even call jQuery or other frameworks
// if it is loaded inside the iframe
iframeContent = iframeWindow.jQuery('#frameBody');

// or
iframeContent = iframeWindow.$('#frameBody');

// or even use any other global variable
iframeWindow.myVar = window.myVar;

// or call a global function
var myVar = iframeWindow.myFunction(param1 /*, ... */);

注意

如果你观察same-origin policy。
，这一切都是可能的

Answer 3

这可能对您有所帮助

var html = $(".ps-lightbox").contents().find("body").html()

顺便说一句，由于XSS保护，您只能从同一来源访问iframe的内容

Answer 4

确保您的代码在jQuery ready事件中。

// This won't work
$("#iframe").contents().find('.ps-lightbox');



// This will work
$(function() {
  $("#iframe").contents().find('.ps-lightbox');
})

在iFrame外面打开<div>弹出窗口

4 个答案: