成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

#iframe系列問題#

lcodecorex / 3219人閱讀

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

父頁面獲取子頁面的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何時(shí)裝載完畢 
/**
 * 下面的代碼能正常運(yùn)行于所有的瀏覽器之上。
 * 由于iframe元素包含于父級頁面中，因此以上方法均不存在跨域問題。
 * 實(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);
            };
        }
    }
在子頁面中獲取父頁面的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);
子頁面調(diào)用父頁面的方法 
parent.window.parentMethod();
父頁面調(diào)用子頁面的方法 
FrameName.window.childMethod();
BUG##Blocked a frame with origin "null" from accessing a cross-origin frame.

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/102396.html

相關(guān)文章

  • 預(yù)加載系列二：讓File Prefetching絲絲潤滑無痛無癢

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

    xcc3641 評論0 收藏0

  • iframe,我們來談一談

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

    awesome23 評論0 收藏0

  • 〔總結(jié)系列〕前端面試題精華篩選

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

    lyning 評論0 收藏0

  • 〔總結(jié)系列〕前端面試題精華篩選

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

    Thanatos 評論0 收藏0

  • 網(wǎng)頁中下載文件的相關(guān)總結(jié)

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

    shusen 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<