解决iframe嵌套进来的页面操作父页面元素加载新页面的问题

待我称王封你为后i 2022-01-16 00:15 561阅读 0赞

一.场景：

<div class="side-right RIG-PAGE mgl-20" id="load-op" style="display: none; top: 20px"></div> 
    
    
    <div class="side-right RIG-PAGE mgl-20" id="iframe-op" style="display: none; top: 20px"> 
            <iframe class="iframe" id="iframe" name="iframe" src="" scrolling="no"></iframe> 
    </div>

当我将页面iframe进去后   想在iframe引进来的页面中的js   操作父页面id为load-op的标签进行加载页面

发现$("\#load-op").load("test.html")不起作用

二.解决：

1.加个声明：$("\#load-op"，parent.document).load("test.html");

2.由于我项目中还使用了requirejs 这种方式虽然可行能生效  但还是存在问题  于是又换了种方法

首先建立一个空白页

>     <!DOCTYPE html>
>     <html lang="en">
>     <head>
>     <meta charset="UTF-8">
>     </head>
>     <body>
>     </body>
>     <script src="/nresource/js/lib/jquery-1.11.3.min.js"></script>
>     <script src="/nresource/commons/marsatg/common-utils.js"></script>
>     <script type="text/javascript">
>     //服务器端发送消息
>     $(function(){
>        window.οnlοad=function(){
>           var type = $.trim(getParam("type"));
>           if(type=="item"){//商品
>                window.parent.postMessage('item',"/admin/home.html");
>           }
>         }
>     })
>     </script>
>     </html>

在iframe页面的js中跳转这个空白页

window.location.href="/admin/commontransfer.html?type=item";

在父页面中加上

>     //添加监听，解决iframe跨域传输问题
>     window.addEventListener('message', function(e) {
>                                   var type = e.data;
>                                   $("#load-op").hide();
>                                   $("#iframe-op").hide();
>                                   $("#iframe").html("");
>                                   if (type == "item") {
>                                         $("#load-op").show();
>                                         $.get("/open/mall/item/item.html",
>                                         function(html) {
>                                             $("#load-op").html(html);
>                                         });
>                                    }
>                                }, false);

如此即可...