#iframe系列問題#

lcodecorex 發布于2019-08-23 15:39 / 3196人閱讀

摘要：何時裝載完畢下面的代碼能正常運行于所有的瀏覽器之上。由于元素包含于父級頁面中，因此以上方法均不存在跨域問題。實際上提供了事件，但必須使用進行綁定。代碼運行時在本地直接用瀏覽器打開的，地址欄是的頁面，只需改為訪問就行。

父頁面獲取子頁面的window對象

/**
 * 在父頁面獲取iframe的window對象
 * chrome：iframeElement. contentWindow 
 * firefox： iframeElement.contentWindow 
 * ie6：iframeElement.contentWindow
 */

function getIframeWindow(iframeElement) {
    return iframeElement.contentWindow;
    //   return iframeElement.contentWindow || iframeElement.contentDocument.parentWindow;
}

父頁面獲取子頁面的document對象

/**
 * 在父頁面獲取iframe的document
 * chrome：iframeElement.contentDocument
 * firefox：iframeElement.contentDocument
 * ie：element.contentWindow.document
 * 備注：ie沒有iframeElement.contentDocument屬性。
 */

function getIframeDocument(element) {
    console.dir(element);
    return element.contentDocument || element.contentWindow.document;
};

iframe何時裝載完畢

/**
 * 下面的代碼能正常運行于所有的瀏覽器之上。
 * 由于iframe元素包含于父級頁面中，因此以上方法均不存在跨域問題。
 * 實際上IE提供了onload事件，但必須使用attachEvent進行綁定。
 */
function iframeOnload() {
    var iframe = document.createElement("iframe");
    iframe.src = "simpleinner.htm";
    if (iframe.attachEvent) {
        iframe.attachEvent("onload", function () {
            alert("Local iframe is now loaded.");
        });
    } else {
        iframe.onload = function () {
            alert("Local iframe is now loaded.");
        };
    }
    document.body.appendChild(iframe);
}

利用onload和attachEvent，實現iframe高度自適應

/**
     * 如果iframe的高度不足屏幕可視區域的高度，則iframe的高度 === 屏幕可視區域的高度
     * 如果iframe的高度大于屏幕可視區域的高度，則iframe的高度 === iframe自己的高度
     *  
     */
    function setFrameHeight(iframe) {
        var iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
        var offsetHeight = iframeDoc.childNodes[1].offsetHeight;
        var clientHeight = document.documentElement.clientHeight||document.body.clientHeight;
        iframe.height = offsetHeight > (clientHeight-35) ? offsetHeight : (clientHeight-35);
    }

    function iframeOnload() {
        var iframe = document.getElementById("iframe");
        if (iframe.attachEvent) {
            iframe.attachEvent("onload", function () {
                setFrameHeight(this);
            });
        } else {
            iframe.onload = function () {
                setFrameHeight(this);
            };
        }
    }

在子頁面中獲取父頁面的window對象

/**
 * 存在跨域問題
 * 在子頁面中獲取父頁面的window對象
 * 父頁面：window.parent
 * 適用于所有瀏覽器
 */
console.log(window.parent);

在子頁面中獲取頂層頁面

/**
 * 存在跨域問題
 * 在子頁面中獲取頂層頁面
 * 頂層頁面：window.top
 * 適用于所有瀏覽器
 */
console.log(window.top);

在子頁面中獲取iframe的html

/**
 * 存在跨域問題
 * 在子頁面中獲取iframe的html
 * window.frameElement
 * （類型：HTMLElement）
 * 適用于所有瀏覽器
 */
console.log(window.frameElement);

子頁面調用父頁面的方法

parent.window.parentMethod();

父頁面調用子頁面的方法

FrameName.window.childMethod();

BUG##Blocked a frame with origin "null" from accessing a cross-origin frame.

跨頁面操作涉及域的概念（origin），錯誤的意思是：未捕獲的安全錯誤：阻止了一個域為null的frame頁面訪問另一個域為null的頁面。代碼運行時在本地直接用瀏覽器打開的，地址欄是file:///的頁面，只需改為localhost訪問就行。

云服務器 GPU云服務器 iframe載入數據問題 ifram iframe webrtc iframe

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/102396.html

預加載系列二：讓File Prefetching絲絲潤滑無痛無癢

摘要：文件路徑，上線后，絲絲潤滑無痛無癢，完美第四個版本，可以做更多注意哦，重點來咯盡早加載是減少首屏時間的關鍵引申閱讀，直接把到里是個不錯的方案。 showImg(https://segmentfault.com/img/bVsmpw); 所謂 File Prefetching 就是在一個頁面加載成功后，默默去預加載后續可能會被訪問到的頁面的資源。前端資源預加載其實沒啥新鮮的，我們倒...

xcc3641 2019-08-06 13:14 評論0 收藏0
iframe,我們來談一談

摘要：通常我們可以在后配置各種指定資源路徑，有如果你未指定的話，則是使用規定的加載策略默認配置就是同域這里和有一點瓜葛的就是和就是用來指定的有效加載路徑。某大咖說: iframe是能耗最高的一個元素，請盡量減少使用某大牛說: iframe安全性太差，請盡量減少使用...wtf, 你們知不知道你們這樣澆滅了多少孩紙學習iframe的熱情和決心。雖然，你們這樣說的我竟無法反駁，但是ifram...

awesome23 2019-08-21 13:29 評論0 收藏0
〔總結系列〕前端面試題精華篩選

摘要：所謂同源是指協議域名端口三者相同，即便兩個不同的域名指向同一個地址，也非同源。那么怎樣解決跨域問題的呢通過跨域跨域跨域跨域跨域資源共享代理跨域中間件代理跨域音樂教程老師有用到協議跨域后端在頭部信息里面設置安全域名公司后端給解決過持續更新中 JavaScript篇如何獲取瀏覽器URL中查詢字符串中的參數？ 1.封裝方法 getUrlArgs(url) { const args =...

lyning 2019-08-02 12:01 評論0 收藏0
〔總結系列〕前端面試題精華篩選

摘要：所謂同源是指協議域名端口三者相同，即便兩個不同的域名指向同一個地址，也非同源。那么怎樣解決跨域問題的呢通過跨域跨域跨域跨域跨域資源共享代理跨域中間件代理跨域音樂教程老師有用到協議跨域后端在頭部信息里面設置安全域名公司后端給解決過持續更新中 JavaScript篇如何獲取瀏覽器URL中查詢字符串中的參數？ 1.封裝方法 getUrlArgs(url) { const args =...

Thanatos 2019-08-29 17:16 評論0 收藏0
網頁中下載文件的相關總結

摘要：對于通過去下載文件時跨域的問題有一個解決思路是自己寫一個代理服務代理服務負責在服務端下載文件并配置好跨域相關的信息然后請求走代理服務進行下載。 0. 概述文件下載是web應用中很常見的場景，在瀏覽器中下載文件, 最基本的方式就是——在頁面內隱藏iframe, 然后將文件下載地址加載到iframe中, 從而觸發瀏覽器的下載行為。此外, html5引入a標簽的download屬性, ...

shusen 2019-08-02 15:57 評論0 收藏0