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

本文链接：https://blog.csdn.net/weixin_41634885/article/details/91878326

一.场景：

<!-- 这是load页面的标签 -->
<div class="side-right RIG-PAGE mgl-20" id="load-op" style="display: none; top: 20px"></div> 

<!-- 这是iframe页面的标签 -->
<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);

如此即可...