#iframe系列問題#

父頁面獲取子頁面的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訪問就行。