iframe跨域

時間 2019-11-21

標籤 iframe 欄目 HTML 简体版

原文原文鏈接

最近幾天在作將以前的WebForm項目集成到新的MVC項目中，在新的MVC項目上要可以訪問WebForm頁面，一開始想着這中嵌套的會有跨域的問題，因此MVC中使用frame來進行佈局，覺得能避免frame的跨域問題，但是昨天仍是遇到了，項目採用常見左側手風琴導航右側顯示內容，以前WebForm的左側也是導航，是樹形導航，並且樹有好多層，新的MVC的左側導航只有二級，右側是用jquery.cleverTabs.js來作的卡片式頁面，jquery.cleverTabs.js裏面有對跨域進行處理，因此二級之內的樹直接新增選項卡就好了，但有的節點比較深，當點擊二級時須要在選項卡頁面再增長一個樹形導航，因而這樣問題就來了。正常的若是沒有增長樹形導航的，能夠直接經過addtab(url)來在右邊的選項卡頁面顯示，但增長了樹形導航以後就會有兩個url，因此不能直接經過jquery.cleverTabs.js添加WebForm的url。我這裏又增長了一個頁面，讓jquery.cleverTabs.js打開新增的頁面，在新增的頁面中又嵌套<frameset></frameset>，左邊是樹形導航，右邊是WebForm頁面。如今要實現的效果是點擊樹形導航的節點獲取url來改變右側WebForm的頁面。以下圖：左側相似一個導航樹，右側是其餘域的一個頁面。當點擊左側的按鈕時從新設置右邊的url顯示其餘頁面。javascript

a頁面html

<frameset cols="50%,50%" id="mainframe" name="mainframe">
    <frame id="leftFrame" name="leftFrame" src="b.html" />
    <frame id="rigthFrame" name="rigthFrame" src="http://www.baidu.com"/>
</frameset>

b頁面java

在b頁面點擊按鈕讓右側顯示其餘的url，開始使用下面的代碼，想着直接設置右側frame的src應該就能夠了，但是確沒一點效果。F12查看出現下面的錯誤.jquery

Uncaught DOMException: Blocked a frame with origin "http://localhost:63342" from accessing a cross-origin frame.跨域

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>Title</title>
    <script src="jquery-3.2.1.min.js"></script>
    <script type="application/javascript">
        $(function () {
            $('#btnTest').on('click',function () {
                self.parent.frames["rigthFrame"].src="http://www.w3school.com.cn/index.html";
            })
        })
    </script>
</head>
<body>
<div><input type="button" id="btnTest"></div>
</body>
</html>

剛開始出現以爲挺納悶，爲何設置屬性不起做用呢？本身也查了下，說是爲了安全起見，瀏覽器禁止這樣的操做，只能讀,不過想一想也是，若是容許這樣的操做，那就能夠隨隨便便的改變下別人的頁面，這樣是很不科學的。那怎麼能改變右側的顯示呢？網上說的也有好幾種解決的方法。當時我也是一頓好找，如今回過頭來再看，其實能夠發現爲何<frame src='XXXX'>這樣就能夠顯示。咱們也能夠動態建立一個frame，而後設置src，這樣就能把想要的頁面獲取到，獲取到以後就是顯示的問題了瀏覽器

<frame id="rigthFrame" name="rigthFrame" src="http://www.baidu.com"/>

b.html左側頁面按鈕點擊執行父窗體方法openframe(url)安全

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>Title</title>
    <script src="jquery-3.2.1.min.js"></script>
    <script type="application/javascript">
        $(function () {
            $('#btnTest').on('click',function () {
               // self.parent.frames["rigthFrame"].src="http://www.w3school.com.cn/index.html";
                self.parent.openframe("http://www.w3school.com.cn/index.html");
            })
        })
    </script>
</head>
<body>
<div><input type="button" id="btnTest"></div>
</body>
</html>

a.html 頁面在openframe(url)中動態建立了一個frame，而後設置url,並將它添加到frameset子節點中，此時已經能夠把想要的頁面獲取到了。只是沒顯示出來。cookie

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>Title</title>
    <script src="jquery-3.2.1.min.js"></script>
    <script type="application/javascript">
            function openframe(url) {
                var frame=document.createElement('frame');
                frame.src=url;
                frame.name="rigthFrame";
                frame.id="rigthFrame";
                self.parent.frames["mainframe"].appendChild(frame);
            }
    </script>
</head>
<frameset cols="50%,50%" id="mainframe" name="mainframe">
    <frame id="leftFrame" name="leftFrame" src="b.html" />
    <frame id="rigthFrame" name="rigthFrame" src="http://www.baidu.com"/>
</frameset>
</html>

當咱們經過瀏覽器刪除第二個frame時見證奇蹟的時刻到了。session

刪除以後就顯示出了新的頁面app

上面是經過瀏覽器調試刪除了,如今只要經過代碼將其刪除那就大功告成了。一行代碼搞定。

 $('#rigthFrame').remove();

下面是完整的代碼父頁面a.html、子頁面b.html

a.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>Title</title>
    <script src="jquery-3.2.1.min.js"></script>
    <script type="application/javascript">
            function openframe(url) {
                var frame=document.createElement('frame');
                frame.src=url;
                frame.name="rigthFrame";
                frame.id="rigthFrame";
                $('#rigthFrame').remove();
                self.parent.frames["mainframe"].appendChild(frame);
            }
    </script>
</head>
<frameset cols="50%,50%" id="mainframe" name="mainframe">
    <frame id="leftFrame" name="leftFrame" src="b.html" />
    <frame id="rigthFrame" name="rigthFrame" src="http://www.baidu.com"/>
</frameset>
</html>

b.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>Title</title>
    <script src="jquery-3.2.1.min.js"></script>
    <script type="application/javascript">
        $(function () {
            $('#btnTest').on('click',function () {
               // self.parent.frames["rigthFrame"].src="http://www.w3school.com.cn/index.html";
                self.parent.openframe("http://www.w3school.com.cn/index.html");
            })
        })
    </script>
</head>
<body>
<div><input type="button" id="btnTest"></div>
</body>
</html>

對於分佈式應用來講，frame跨域是一個狀況，還有session、cookie共享的狀況也要考慮。這些都是跨域的問題。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。