打开 <div> iFrame外的弹出窗口

Question

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

问题：我试图将iframe的<div class = "ps-lightbox"> </ div>移出iframe 。 但是我无法用jQuery弄清楚。

我知道这听起来很混乱。 但我希望你能理解我的解释。

有谁知道如何解决这一问题？ 你可以救我的一天。

网页的屏幕截图 <

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中，它也可以工作，该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中的调用函数

从iframe仅获取window元素，以调用一些全局函数，变量或整个库（例如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 /*, ... */);

注意

如果遵守同源策略，则所有这一切都是可能的。

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

打开 <div> iFrame外的弹出窗口

问题描述

4 个解决方案

解决方案1
0 2018-06-09 14:36:38

解决方案2
0 2018-06-09 14:43:09

解决方案3
-1 2018-06-09 13:58:11

解决方案4
-1 2018-06-09 14:20:44

打开 <div> iFrame外的弹出窗口

问题描述

4 个解决方案

解决方案1 0 2018-06-09 14:36:38

解决方案2 0 2018-06-09 14:43:09

解决方案3 -1 2018-06-09 13:58:11

解决方案4 -1 2018-06-09 14:20:44

解决方案1
0 2018-06-09 14:36:38

解决方案2
0 2018-06-09 14:43:09

解决方案3
-1 2018-06-09 13:58:11

解决方案4
-1 2018-06-09 14:20:44