資訊專欄INFORMATION COLUMN
摘要：巧用做浮層的詬病太多了，還好標準沒有廢棄它，其實還是有點用的。做的過程發現頁面是可以滑動的，理想的情況當然是鎖住頁面。父頁面域名白名單子頁面好了，完成這樣的需求，半天都不用。用雖然不是最好的方案，但對于本案例來是最佳的。
巧用iframe做浮層
iframe的詬病太多了，還好標準沒有廢棄它，其實還是有點用的。在開發產品的時候，我們不得不舍棄一些東西來換取效率。
我們的需求是，在某些特定的場景下在現有的頁面做一個彈窗，這是常有的運營手段，雖然我覺得是一種粗魯的運營，但需求還是得做啊。
原有的平臺頁面：
新增的運營活動頁面：
合成的效果圖：
看到最后這個圖不就是個簡單的彈層嗎？
但這個彈層的邏輯不少啊，而且是由專門的系統配置生成，包括領取卡券邏輯。跟現有的頁面基本沒關系，而且只是一個臨時的運營活動。沒必要在主頁面的邏輯中專門加一個這樣的活動邏輯。
所以最好是將兩個頁面合成到一起。
設置這個臨時iframe的樣式使得iframe鋪滿整個瀏覽器窗口，這里可以先將透明度設置為0，等到iframe完全加載再顯示出來，以免iframe加載失敗或者樣式抖動導致用戶體驗就不太友好：
.float-iframe{
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
border: 0;
z-index: 1000;
opacity: 0;
}
iframe加載出來后發現并不是透明的，平臺頁面的背景被遮蓋了。這里需要設置iframe的body樣式：
background-color:rgb(0,0,0,0.6);
設置透明度為0.6，可以生成一個透明度的蒙層，這樣也可以免去自己再去寫一個遮罩層。
在body上加上下面的樣式，可以設置完全透明：
background-color: transparent;
這樣就需要自己去加遮罩層，不然兩個頁面的元素視覺上看起來會疊加到一起了。
做的過程發現頁面是可以滑動的，理想的情況當然是鎖住頁面。這個時候想到的是阻止touchmove事件
document.addEventListener("touchmove", function(e){
e.preventDefault();
},false)
發現這樣是不生效的，在iframe的頁面區域照樣可以滑動，在主頁面卻不能滑動，說明對iframe是無效的。唯一的解釋就是發生在iframe的touch事件只在iframe內部冒泡，并不會傳遞到父頁面，所以是不能阻止父頁面的滑動，如果這個猜想成立的話，以下代碼應該會生效
iframe.onload = function(){
var doc = iframe.contentDocument;
doc.addEventListener("touchmove", function(e){
e.preventDefault();
},false)
};
這樣設置以后，果然就不能滑動了。
接下來的問題，怎么去關閉iframe。在頁面上我們設計了一個X按鈕，用來關閉。這里要分場景來做，一種是同源，另外是不同源。
我們的這兩個頁面是同源，就比較好做了，通過父頁面直接控制子頁面，完全的控制權限。
var doc = iframe.contentDocument;
doc.querySelector("#_js_close").addEventListener("click", function(){
document.body.removeChild(iframe);
});
如果是不同源，會比較麻煩點，需要兩個頁面間的通信。
// 父頁面 http://parent.com
window.addEventListener("message", receiveMessage, false);
function receiveMessage(event){
var origin = event.origin || event.originalEvent.origin;
// 域名白名單
if (origin !== "http://child.com") return;
if(event.data === "closepage"){
document.body.removeChild(iframe);
}
}
// 子頁面 http://child.com
window.postMessage("closepage", "http://parent.com");
好了，完成這樣的需求，半天都不用。如果從頭開始寫，估計要花幾天，主要不是顯示彈層邏輯，而是彈層里本身的邏輯。用iframe雖然不是最好的方案，但對于本案例來是最佳的。
本文為原創文章，可能會經常更新知識點以及修正一些錯誤，因此轉載請保留原出處，方便溯源，謝謝合作。
本文的博客地址：http://www.iamaddy.net/2017/0...
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/50775.html
摘要：巧用做浮層的詬病太多了，還好標準沒有廢棄它，其實還是有點用的。做的過程發現頁面是可以滑動的，理想的情況當然是鎖住頁面。父頁面域名白名單子頁面好了，完成這樣的需求，半天都不用。用雖然不是最好的方案，但對于本案例來是最佳的。 巧用iframe做浮層 iframe的詬病太多了，還好標準沒有廢棄它，其實還是有點用的。在開發產品的時候，我們不得不舍棄一些東西來換取效率。 我們的需求是，在某些特定...
摘要：在中巧用解決跳轉到第三方平臺時不能回調的問題比如支付在開發中遇到不少的坑，絕大部分解決了但是在我們的中如果跳轉到第三方網站上時，那么問題來了此時我們的是不能監聽到你在其它網站上的事件的，所以當你想要回退到我們自己上時請緊握你的蛋小編在開發這 在ionic中巧用iframe解決跳轉到第三方平臺時不能回調的問題－比如支付 在ionic開發中遇到不少的坑，絕大部分解決了但是在我們的app...
閱讀 1972·2021-11-23 10:03
閱讀 4130·2021-11-22 09:34
閱讀 2466·2021-10-08 10:05
閱讀 2247·2019-08-30 15:53
閱讀 1686·2019-08-30 13:56
閱讀 1149·2019-08-29 16:52
閱讀 1102·2019-08-26 13:31
閱讀 3346·2019-08-26 11:45
