javascript - 怎麼破解top.location.href =window.location.href，透過iframe嵌入別人網頁？

Question

如題，可能講的不太明白。
手邊有個需求，產品經理說：「小胡啊，我們產品要新增一個功能，就是能夠將別寫得好的H5頁面展現出來，或者向用戶提供網頁展示，比如展示某某新聞網站」
我想啊，既然要做這麼流氓的事，以前都用iframe來嵌入第三方頁面，還是用這個吧,況且別的方法也沒找到。
接著問題就來了，例如某新聞網站嵌過來就反客為主了，直接把我的html頁面幹掉了！經過不懈的努力，發現原來是該網頁有「反運營商劫持代碼」；代碼如下：

<!-- 反运营商劫持 S -->
<style type="text/css">
    html {
        display:none;
    }
    </style>
<script>
    if( self == top ) {
        document.documentElement.style.display = 'block' ;
    } else {
        top.location = self.location ;
    }
    </script>
<!-- 反运营商劫持 E -->

哪位大神能幫忙破解嗎？

採用以下方法：

//在主窗口的</head>标签前面添加 
<script type="text/javascript"> 
var location=document.location 
</script>
//或者: 
<script type="text/javascript">
var location="" 
</script>

然並卵。 。 。

Answer 1

一樓答主所言極是；
目前的解決方案是透過ifram的「沙盒屬性」sandbox來禁止跳轉；
所有主流瀏覽器都支援 sandbox 屬性。但IE 9 以及更早的版本不支援 sandbox 屬性，Opera 12 以及更早的版本也不支援該屬性。
如果您要相容IE8及以下，請忽略答案！ ！ ！
iframe的sandbox屬性及值：

不設定allow-top-navigation就不會被強制跳轉了！ ！ ！
當然，你會發現不跳轉但是頁面內容不顯示，以xw.qq.com為例，你會發現是因為iframe中的html被設定了"display:none";

  //以下代码在已webview形式嵌套到android中的html页面有效
  $(window.frames["iframe的id"].document).find("html").css('display', 'block') //基于jQuery

在pc端暫時沒找到解藥
報錯跨域！ ！

正常介面（android webview中的前端頁）：

程式碼（自行調試，pc繞過！）：
var iframe = document.createElement("iframe");

    iframe.id = "iframeId";
    iframe.src = "xw.qq.com";
    iframe.style.width = "100%";
    iframe.style.height = "100%";
    iframe.sandbox = "allow-scripts allow-same-origin";
    iframe.frameborder = "0";
    iframe.scrolling = "no";
    iframe.marginwidth = "0";
    iframe.marginheight = "0";
    iframe.border = "0";
       if (! /*@cc_on!@*/ 0) { //浏览器 不是IE的情况下
        iframe.onload = function () {
            console.log("已经加载完成！/no IE");
            $(window.frames["iframeId"].document).find("html").css('display', 'block');
        };
    } else {
        iframe.onreadystatechange = function () {
            if (iframe.readyState == "complete") {
                console.log("已经加载完成！/ IE");
                $(window.frames["iframeId"].document).find("html").css('display', 'block');
            }
        };
    }
    $this.appDom.html(iframe);
    

Answer 2

雷雷