2. 程式人生 > >Iframe 有什麼好處，有什麼壞處？國內還有哪些知名網站仍用Iframe，為什麼？有哪些原來用的現在拋棄了？又是為什麼？

Iframe 有什麼好處，有什麼壞處？國內還有哪些知名網站仍用Iframe，為什麼？有哪些原來用的現在拋棄了？又是為什麼？

阿新 • • 發佈：2019-01-20
iframe原本的用法在現在看來是不合時宜的，問題太多了，不一一列舉，但是它的其他功能卻是不錯的黑魔法，這裡列舉一些，想到了再更新：
  1. 用來實現長連線，在websocket不可用的時候作為一種替代，最開始由google發明。Comet：基於 HTTP 長連線的“伺服器推”技術
  2. 跨域通訊。JavaScript跨域總結與解決辦法 ，類似的還有瀏覽器多頁面通訊，比如音樂播放器，使用者如果打開了多個tab頁，應該只有一個在播放。
  3. 歷史記錄管理，解決ajax化網站響應瀏覽器前進後退按鈕的方案，在html5的history api不可用時作為一種替代。
  4. 純前端的utf8和gbk編碼互轉。比如在utf8頁面需要生成一個gbk的encodeURIComponent字串，可以通過頁面載入一個gbk的iframe，然後主頁面與子頁面通訊的方式實現轉換，這樣就不用在頁面上插入一個非常巨大的編碼對映表文件了，其中子頁面內容：
    <!doctype html>
     
    
<html>
  <head>
    <meta charset="gbk">
    <script>
      window.encoding = function(str){
        //利用a元素的href屬性來encode
        var a = document.createElement("a");
        a.href = "/?q=" + str;
        var url = a.href; //這裡讀取的時候會自動編碼
        a.href = "/?q=";
        return url
     
    .replace(a.href, "");
      };
    </script>
  </head>
</html>
    把這個iframe部署到父頁面的同源服務上，就能在父頁面直接呼叫iframe中的encoding介面了。
  5. 評論裡有提到，用iframe實現無重新整理檔案上傳，在FormData不可用時作為替代方案
  6. 在移動端用於從網頁調起客戶端應用（此方法在iphone上並不安全，慎用！具體風險看這裡 iOS URL Scheme 劫持 ）。比如想在網頁中調起支付寶，我們可以建立一個iframe，src為：
    alipayqr://platformapi/startapp?saId=10000007&clientVersion=3.7.0.0718&qrcode={支付二維碼掃描的url}
    瀏覽器接收到這個url請求發現未知協議，會交給系統處理，系統就能調起支付寶客戶端了。我們還能趁機檢查一下使用者是否安裝客戶端：給iframe設定一個3-5秒的css3的transition過渡動畫，然後監聽動畫完成事件，如果使用者安裝了客戶端，那麼系統會調起，並將瀏覽器轉入後臺執行，進入後臺的瀏覽器一般不會再執行css動畫，這樣，我們就能通過判斷css動畫執行的時長是否超過預設來判斷使用者是否安裝某個客戶端了：
    /**
 * 調起客戶端
 * @param url {String}
 * @param onSuccess {Function}
 * @param onFail {Function}
 */
module.exports = function(url, onSuccess, onFail){
    // 記錄起始時間
    var last = Date.now();

    // 建立一個iframe
    var ifr = document.createElement('IFRAME');
    ifr.src = url;
    // 飄出螢幕外
    ifr.style.position = 'absolute';
    ifr.style.left = '-1000px';
    ifr.style.top = '-1000px';
    ifr.style.width = '1px';
    ifr.style.height = '1px';
    // 設定一個4秒的動畫用於檢查客戶端是否被調起
    ifr.style.webkitTransition = 'all 4s';
    document.body.appendChild(ifr);
    setTimeout(function(){
        // 監聽動畫完成時間
        ifr.addEventListener('webkitTransitionEnd', function(){
            document.body.removeChild(ifr);
            if(Date.now() - last < 6000){
                // 如果動畫執行時間在預設範圍內，就認為沒有調起客戶端
                if(typeof onFail === 'function'){
                    onFail();
                }
            } else if(typeof onSuccess === 'function') {
                // 動畫執行超過預設範圍，認為調起成功
                onSuccess();
            }
        }, false);
        // 啟動動畫
        ifr.style.left = '-10px';
    }, 0);
};
  7. 建立一個全新的獨立的宿主環境。經 大神提醒，iframe還可以用於建立新的宿主環境，用於隔離或者訪問原始介面及物件，比如有些前端安全的防範會覆蓋一些原生的方法防止惡意呼叫，那我們就能通過建立一個iframe，然後從iframe中取回原始物件和方法來破解這種防範。類似的還有 @賀師俊 曾經提到的javascript裸物件建立中的一種方法：如何建立一個JavaScript裸物件 ，一般所見即所得編輯器也是由iframe建立的， @Dion 的回答有提到
  8. IE6下用於遮罩select。經 @yaniv 提醒想起來的。曾經在ie6時代，想搞一個模態視窗，如果視窗疊加在select元素上面，是遮不住select的，為了解決這個問題，可以通過在模態視窗元素下面墊一個iframe來實現遮罩，好坑爹的ie6，還我青春韶華~~
  9. to be continued ...

相關推薦

Iframe 有什麼好處，有什麼壞處？國內還有哪些知名網站仍用Iframe，為什麼？有哪些原來用的現在拋棄了？又是為什麼？

iframe原本的用法在現在看來是不合時宜的，問題太多了，不一一列舉，但是它的其他功能卻是不錯的黑魔法，這裡列舉一些，想到了再更新： 用來實現長連線，在websocket不可用的時候作為一種替代，最開始由google發明。Comet：基於 HTTP 長連線的“伺服器推”技術跨域通訊。JavaScript跨

lnmp.org 安裝環境的，root權限都沒法刪除網站文件夾，問題解決-轉

權限 網站 opera 如果 情況 題解 site use home rm -rf刪除網站目錄時出現rm: cannot remove `.user.ini‘: Operation not permitted rm -rf刪除網站目錄時出現rm: cannot re

中資收購美新半導體，為何能通過CFIUS審查（其實是國內公司，技術水平國內領先，和國際仍有差距）

分享 並不是 盈利 私有 與此同時 科技 政府 產品 多次 日前，華燦光電發布公告稱，旗下子公司和諧光電收購美國美新半導體終獲得CFIUS審查通過。這是中資收購豪威科技、圖芯科技等公司之後，再次從美國成功收購半導體企業。而且本次中資收購美新半導體還是在特朗普上臺後，在強烈的

除了BAT，國內還有哪些值得關註的人工智能公司？

困難 圖片 市場 ges text 計算 分析 分享圖片 化妝品 AlphGo的走紅使人工智能獲得了全社會的關註，人工智能在與各個行業的結合中，不斷迸發出新的需求並推動技術革新，一大波人工智能領域的公司“適時而生”。縱觀全局，除了扛起的互聯網巨頭BAT，還有哪些人工智能公司

國內固定獨享便宜優質代理ip，哪裡有呢？

日租 1-3 元 1條 月租 5-15 元一條 ，高併發數，高連線數 支援日租月租周租 1、代理伺服器的概況 代理伺服器（Proxy Server）是一種重要的伺服器安全功能，它的工作主要在開放系統互聯(OSI)模型的會話層，從而起到防火牆的作用。代理伺服器大多被用來連線INTERNET（國際網際網路）

有哪些10分鐘就能學會，對人生有益的知識或技能？

1.人們傾向於記住最先發生的事情和最後發生的事情。中間的事情記不清楚。所以，如果你要做自我介紹的話，最好做第一個或者最後一個。面試的時候，也是一樣的。 2.如果你在酒吧或者前臺工作，在你身後放一面鏡子。這樣的話，當顧客發脾氣的時候，就能從鏡子裡看到自己的醜惡嘴臉。一面鏡子可以

測試引入的js檔案，和直接在頁面中寫的js程式碼執行的順序，順便還有個疑問(即JavaScript中變數宣告有var和沒var的區別)

測試引入的js檔案，和直接在頁面中寫的js程式碼執行的順序，順便還有個疑問(即JavaScript中變數宣告有var和沒var的區別)，有時間再倒回來理解這個問題 <!DOCTYPE html> <html> <head> <meta charset

作為一枚程式設計師，每天必用的軟體有哪些？

2018年11月02日 14:23:27 chen_ziyang 閱讀數：3 標籤： 程式設計師 工具

國內有哪些知名公司在使用Golang語言？

統計在使用Golang的公司 和 使用效果  如果你的公司正在使用golang 歡迎回復告訴情況，和大家分享～～ 已知的如下：360訊息推送的資料： 16臺機器，標配：24個硬體執行緒，64GB記憶體  Linux Kernel 2.6.32 x86_64  單機80萬併

為什麼有了post那麼多優點，還有還多網站用get，比如百度搜索

前幾天工作中，所有表單我都採用post方法，頭兒說那樣不好，大型網站上一般都採用get方法，不理解。 在網上摘到一段比較有用的話  減低伺服器流量壓力根據 HTTP 規範，GET 用於資訊獲取，而且應該是 安全的和 冪等的。所謂安全的意味著該操作用於獲取資訊而非修改資訊

機器學習門下，有哪些在工業界應用較多，前景較好的小方向？

推薦一個尚未受到足夠重視但潛力很大的方向：異常檢測(anomaly detection)，也叫異常分析(outlier analysis)，相關的還有novelty detection。異常檢測在工業上有非常廣泛的應用場景：金融業：從海量資料中找到“欺詐案例”，如信用卡反詐騙

事務有哪些特性？spring的事務管理有幾種方式實現，如何實現？spring 中常用的兩種事務配置方式以及事務的傳播性、隔離級別

事務有哪些特性？             1.原子性：一個事務中所有對資料庫的操作是一個不可分割的操作序列，要麼全做要麼全不做            2.一致性：資料不會因為事務的執行而遭到破壞            3.隔離性：一個事物的執行，不受其他事務的干擾，即併發執

國內排名前幾的客流統計系統公司有哪些？

融合 提升 管理 廣泛 會員 高新技術 上海 大數 人臉識別 國內客流統計系統市場，經過十幾年的角逐競爭，市場從藍海到紅海。圖像/視頻處理技術類公司，安防監控類公司，零售系統開發軟件公司，視頻傳輸等設備廠商紛紛入局，目前市場上能提供客流統計系統的公司，不下幾十家。其中不乏一

如果父類中有構造函數，並且構造函數有參數，而子類沒有，因為子類繼承了這個構造函數，那麽創建子類對象的時候，要傳參

bsp class nbsp 參數 int init log ini elf 1 class a(): 2 def __init__(self,aa): 3 self.aa = aa 4 class b(a): 5 def do(self)

10.16輸入一個字符串，內有數字和非數字字符，如： a123x456 17960? 302tab5876 將其中連續的數字作為一個整數，依次存放到一數組num中。例如123放在num[0]中，456放在num[1]中……統計共有多少個整數，並輸出這些數。

tab lnp zip sm2 cuc ycm rds qt5 tft 10.16輸入一個字符串，內有數字和非數字字符，如： a123x456 17960? 302tab5876 將其中連續的數字作為一個整數，依次存放到一數組num中。例

swiper裏面的，tab切換，不同的slide高度不一樣，外層高度何如隨之改變，如果裏面的每一屏的高度不一樣，那麽就會一直以高度最大的一個座位最外層的高度，總成了頁面內容少的那一頁有很大空白，改如何動態改變外層的高度呢

ide設置 就會 否則 location translate dir 最大的 ext 如果 解決方案：1.autoHeight: true;缺點：有明顯的跳動效果2.先給容器設固定高度，每次滑動多少時，改變當前tab頁的容器高度，我在實現是遇到一點小問題，代碼忘記保存了。

［微軟］有兩個序列a,b，大小都為n,序列元素的值任意整數，無序； 要求：通過交換a,b中的元素，使[序列a元素的和]與[序列b元素的和]之間的差最小_利用排列組合思路解決_python版

+= 求和 ever tro 解決 turn 運行 main lis (原題出自微軟公司面試題)問題如下：有兩個序列a,b，大小都為n,序列元素的值任意整數，無序；要求：通過交換a,b中的元素，使[序列a元素的和]與[序列b元素的和]之間的差最小。例如:a=[100,99,

有n級臺階，每次爬1或者2級臺階，用程序計算有多少種爬法

stat cnblogs 計算 多少 bsp span 方法 每次 spa 1.遞歸的方法： private static int Max(int i) { if (i<=2) { return i; }

ERP系統好用的有哪些？ERP系統能給企業帶來哪些好處？

存儲 應用 信息技術 並且 ann 什麽 體會 存在 快速 在全球的工業產品中，小到衣帽，大到航天器等，中國制造已經無處不在，但是，現在的無處不在，不代表永遠，要想長久發展，企業就需要學習變通，其中借助信息化系統管理是關鍵，例如ERP系統的應用，那麽，ERP系統有哪些品牌，

數據埋點最基本需要獲取的用戶數據有哪些？

根據 可能 -a 統計代碼 自己 一個 著作權 mage 由於 數據埋點最基本需要獲取的用戶數據有哪些？ 原文出處https://www.zhihu.com/question/20412632 作者：劉大大鏈接：https://www.zhihu.com/question/