#iframe系列問(wèn)題#

lcodecorex 發(fā)布于2019-08-23 15:39 / 3190人閱讀

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

父頁(yè)面獲取子頁(yè)面的window對(duì)象

/**
 * 在父頁(yè)面獲取iframe的window對(duì)象
 * chrome：iframeElement. contentWindow 
 * firefox： iframeElement.contentWindow 
 * ie6：iframeElement.contentWindow
 */

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

父頁(yè)面獲取子頁(yè)面的document對(duì)象

/**
 * 在父頁(yè)面獲取iframe的document
 * chrome：iframeElement.contentDocument
 * firefox：iframeElement.contentDocument
 * ie：element.contentWindow.document
 * 備注：ie沒(méi)有iframeElement.contentDocument屬性。
 */

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

iframe何時(shí)裝載完畢

/**
 * 下面的代碼能正常運(yùn)行于所有的瀏覽器之上。
 * 由于iframe元素包含于父級(jí)頁(yè)面中，因此以上方法均不存在跨域問(wèn)題。
 * 實(shí)際上IE提供了onload事件，但必須使用attachEvent進(jìn)行綁定。
 */
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，實(shí)現(xiàn)iframe高度自適應(yīng)

/**
     * 如果iframe的高度不足屏幕可視區(qū)域的高度，則iframe的高度 === 屏幕可視區(qū)域的高度
     * 如果iframe的高度大于屏幕可視區(qū)域的高度，則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);
            };
        }
    }

在子頁(yè)面中獲取父頁(yè)面的window對(duì)象

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

在子頁(yè)面中獲取頂層頁(yè)面

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

在子頁(yè)面中獲取iframe的html

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

子頁(yè)面調(diào)用父頁(yè)面的方法

parent.window.parentMethod();

父頁(yè)面調(diào)用子頁(yè)面的方法

FrameName.window.childMethod();

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

跨頁(yè)面操作涉及域的概念（origin），錯(cuò)誤的意思是：未捕獲的安全錯(cuò)誤：阻止了一個(gè)域?yàn)閚ull的frame頁(yè)面訪(fǎng)問(wèn)另一個(gè)域?yàn)閚ull的頁(yè)面。代碼運(yùn)行時(shí)在本地直接用瀏覽器打開(kāi)的，地址欄是file:///的頁(yè)面，只需改為localhost訪(fǎng)問(wèn)就行。