window.name + iframe跨域實例

時間 2019-12-06

標籤 window.name window iframe 實例欄目 Windows 简体版

原文原文鏈接

window對象有個name屬性，該屬性有個特徵：即在一個窗口(window)的生命週期內,窗口載入的全部的頁面都是共享一個window.name的，每一個頁面對window.name都有讀寫的權限，window.name是持久存在一個窗口載入過的全部頁面中的，並不會因新頁面的載入而進行重置。javascript

在getDomainData.html頁面中，咱們怎麼把data.html頁面載入進來呢？顯然咱們不能直接在getDomainData.html頁面中經過改變window.location來載入data.html頁面，由於咱們想要即便getDomainData.htmll頁面不跳轉也能獲得data.html裏的數據。答案就是在getDomainData.html頁面中使用一個隱藏的iframe來充當一箇中間人角色，由iframe去獲取data.html的數據，而後getDomainData.html再去獲得iframe獲取到的數據。html

充當中間人的iframe想要獲取到data.html的經過window.name設置的數據，只須要把這個iframe的src設爲http://localhost:8001/data.html就好了。而後getDomainData.html想要獲得iframe所獲取到的數據，也就是想要獲得iframe的window.name的值，還必須把這個iframe的src設成跟getDomainData.html頁面同一個域才行，否則根據前面講的同源策略，getDomainData.html是不能訪問到iframe裏的window.name屬性的。這就是整個跨域過程。java

1. 在文件夾test下新建getDomainData.html和null.html文件，null.html爲一個空文件，getDomainData.html代碼以下node

<!DOCTYPE html>
<html>
<head>
    <title>跨域獲取數據</title>
    <meta charset="utf-8">
    <script type="text/javascript">
    function domainData(url, fn)
    {
        var isFirst = true;
        var iframe = document.createElement('iframe');
        iframe.style.display = 'none';
        var loadfn = function(){
            if(isFirst){
                iframe.contentWindow.location = 'http://localhost:8000/null.html';
                isFirst = false;
            } else {
                fn(iframe.contentWindow.name);
                iframe.contentWindow.document.write('');
                iframe.contentWindow.close();
                document.body.removeChild(iframe);
                iframe.src = '';
                iframe = null;
            }
        };
        iframe.src = url;
        if(iframe.attachEvent){//IE 支持 iframe 的 onload 事件，不過是隱形的，須要經過 attachEvent 來註冊。
            iframe.attachEvent('onload', loadfn);
        } else {
            iframe.onload = loadfn; //IE6 IE7 IE8 中沒法經過爲屬性賦值方式爲 IFRAME 元素綁定 load 事件處理函數
        }
         
        document.body.appendChild(iframe);
    }
    </script>
</head>
<body>
 
</body>
    <script type="text/javascript">
    domainData('http://localhost:8001/data.html', function(data){
        alert(data);
    });
    </script>
</html>

2. 在文件夾test1下新建data.html，代碼以下跨域

<script type="text/javascript">
    window.name = "跨域獲得的數據";
</script>

3. 經過node static搭建本地服務app

即端口8000上的頁面要跨域訪問端口8001上的數據dom

4. 訪問http://localhost:8000/getDomaindata.html讀取到http://localhost:8001/data.html中window.name的數據函數

注意：IE6 IE7 IE8 中沒法經過爲屬性賦值方式爲 IFRAME 元素綁定 load 事件處理函數url

有三種方式能夠解決這個兼容性問題spa

//1.直接爲 HTMLIFrameElement.onload 屬性爲 IFRAME 標記賦值事件處理函數
//<iframe id="ifarmeB" onload="iframeLoadB()"></iframe>
//2.使用 HTMLIFrameElement.setAttribute 方法爲 IFRAME 標記賦值事件處理函數
//iframeA.setAttribute("onload","iframeLoadA()");
//3.使用事件監聽方式爲 IFRAME 的 onload 事件綁定處理函數
//addEvent("load",iframeA,iframeLoadA);
function addEvent(element, eventName, fn){
    if(element.attachEvent) {
        element.attachEvent("on" + eventName, fn);
    }
    else {
        element.addEventListener("on" + eventName, fn, false);
    }
}

相關標籤/搜索

每日一句

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