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

資訊專欄INFORMATION COLUMN

巧用iframe做浮層

VishKozus / 3505人閱讀

摘要：巧用做浮層的詬病太多了，還好標(biāo)準(zhǔn)沒(méi)有廢棄它，其實(shí)還是有點(diǎn)用的。做的過(guò)程發(fā)現(xiàn)頁(yè)面是可以滑動(dòng)的，理想的情況當(dāng)然是鎖住頁(yè)面。父頁(yè)面域名白名單子頁(yè)面好了，完成這樣的需求，半天都不用。用雖然不是最好的方案，但對(duì)于本案例來(lái)是最佳的。

巧用iframe做浮層

iframe的詬病太多了，還好標(biāo)準(zhǔn)沒(méi)有廢棄它，其實(shí)還是有點(diǎn)用的。在開發(fā)產(chǎn)品的時(shí)候，我們不得不舍棄一些東西來(lái)?yè)Q取效率。

我們的需求是，在某些特定的場(chǎng)景下在現(xiàn)有的頁(yè)面做一個(gè)彈窗，這是常有的運(yùn)營(yíng)手段，雖然我覺(jué)得是一種粗魯?shù)倪\(yùn)營(yíng)，但需求還是得做啊。

原有的平臺(tái)頁(yè)面：

新增的運(yùn)營(yíng)活動(dòng)頁(yè)面：

合成的效果圖：

看到最后這個(gè)圖不就是個(gè)簡(jiǎn)單的彈層嗎？

但這個(gè)彈層的邏輯不少啊，而且是由專門的系統(tǒng)配置生成，包括領(lǐng)取卡券邏輯。跟現(xiàn)有的頁(yè)面基本沒(méi)關(guān)系，而且只是一個(gè)臨時(shí)的運(yùn)營(yíng)活動(dòng)。沒(méi)必要在主頁(yè)面的邏輯中專門加一個(gè)這樣的活動(dòng)邏輯。

所以最好是將兩個(gè)頁(yè)面合成到一起。

設(shè)置這個(gè)臨時(shí)iframe的樣式使得iframe鋪滿整個(gè)瀏覽器窗口，這里可以先將透明度設(shè)置為0，等到iframe完全加載再顯示出來(lái)，以免iframe加載失敗或者樣式抖動(dòng)導(dǎo)致用戶體驗(yàn)就不太友好：

.float-iframe{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border: 0;
    z-index: 1000;
    opacity: 0;
}

iframe加載出來(lái)后發(fā)現(xiàn)并不是透明的，平臺(tái)頁(yè)面的背景被遮蓋了。這里需要設(shè)置iframe的body樣式：

 background-color:rgb(0,0,0,0.6);

設(shè)置透明度為0.6，可以生成一個(gè)透明度的蒙層，這樣也可以免去自己再去寫一個(gè)遮罩層。
在body上加上下面的樣式，可以設(shè)置完全透明：

 background-color: transparent;

這樣就需要自己去加遮罩層，不然兩個(gè)頁(yè)面的元素視覺(jué)上看起來(lái)會(huì)疊加到一起了。

做的過(guò)程發(fā)現(xiàn)頁(yè)面是可以滑動(dòng)的，理想的情況當(dāng)然是鎖住頁(yè)面。這個(gè)時(shí)候想到的是阻止touchmove事件

document.addEventListener("touchmove", function(e){
    e.preventDefault();
},false)

發(fā)現(xiàn)這樣是不生效的，在iframe的頁(yè)面區(qū)域照樣可以滑動(dòng)，在主頁(yè)面卻不能滑動(dòng)，說(shuō)明對(duì)iframe是無(wú)效的。唯一的解釋就是發(fā)生在iframe的touch事件只在iframe內(nèi)部冒泡，并不會(huì)傳遞到父頁(yè)面，所以是不能阻止父頁(yè)面的滑動(dòng)，如果這個(gè)猜想成立的話，以下代碼應(yīng)該會(huì)生效

iframe.onload = function(){
    var doc = iframe.contentDocument;
    
    doc.addEventListener("touchmove", function(e){
        e.preventDefault();
    },false)
};

這樣設(shè)置以后，果然就不能滑動(dòng)了。

接下來(lái)的問(wèn)題，怎么去關(guān)閉iframe。在頁(yè)面上我們?cè)O(shè)計(jì)了一個(gè)X按鈕，用來(lái)關(guān)閉。這里要分場(chǎng)景來(lái)做，一種是同源，另外是不同源。

我們的這兩個(gè)頁(yè)面是同源，就比較好做了，通過(guò)父頁(yè)面直接控制子頁(yè)面，完全的控制權(quán)限。

var doc = iframe.contentDocument;
doc.querySelector("#_js_close").addEventListener("click", function(){
    document.body.removeChild(iframe);
});

如果是不同源，會(huì)比較麻煩點(diǎn)，需要兩個(gè)頁(yè)面間的通信。

// 父頁(yè)面 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);
  }
}

// 子頁(yè)面 http://child.com
window.postMessage("closepage", "http://parent.com");

好了，完成這樣的需求，半天都不用。如果從頭開始寫，估計(jì)要花幾天，主要不是顯示彈層邏輯，而是彈層里本身的邏輯。用iframe雖然不是最好的方案，但對(duì)于本案例來(lái)是最佳的。

本文為原創(chuàng)文章，可能會(huì)經(jīng)常更新知識(shí)點(diǎn)以及修正一些錯(cuò)誤，因此轉(zhuǎn)載請(qǐng)保留原出處，方便溯源，謝謝合作。
本文的博客地址：http://www.iamaddy.net/2017/0...

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

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

相關(guān)文章

  • 巧用iframe做浮層

    摘要：巧用做浮層的詬病太多了，還好標(biāo)準(zhǔn)沒(méi)有廢棄它，其實(shí)還是有點(diǎn)用的。做的過(guò)程發(fā)現(xiàn)頁(yè)面是可以滑動(dòng)的，理想的情況當(dāng)然是鎖住頁(yè)面。父頁(yè)面域名白名單子頁(yè)面好了，完成這樣的需求，半天都不用。用雖然不是最好的方案，但對(duì)于本案例來(lái)是最佳的。 巧用iframe做浮層 iframe的詬病太多了，還好標(biāo)準(zhǔn)沒(méi)有廢棄它，其實(shí)還是有點(diǎn)用的。在開發(fā)產(chǎn)品的時(shí)候，我們不得不舍棄一些東西來(lái)?yè)Q取效率。 我們的需求是，在某些特定...

    kyanag 評(píng)論0 收藏0

  • ionic 旅途-- 一起來(lái)填坑

    摘要：在中巧用解決跳轉(zhuǎn)到第三方平臺(tái)時(shí)不能回調(diào)的問(wèn)題比如支付在開發(fā)中遇到不少的坑，絕大部分解決了但是在我們的中如果跳轉(zhuǎn)到第三方網(wǎng)站上時(shí)，那么問(wèn)題來(lái)了此時(shí)我們的是不能監(jiān)聽到你在其它網(wǎng)站上的事件的，所以當(dāng)你想要回退到我們自己上時(shí)請(qǐng)緊握你的蛋小編在開發(fā)這 在ionic中巧用iframe解決跳轉(zhuǎn)到第三方平臺(tái)時(shí)不能回調(diào)的問(wèn)題－比如支付 在ionic開發(fā)中遇到不少的坑，絕大部分解決了但是在我們的app...

    qieangel2013 評(píng)論0 收藏0

  • 簡(jiǎn)單浮層制作

    摘要：小知識(shí)透明的在中的像素小一些，背景色變一下，這樣邊框自然出來(lái)了點(diǎn)擊按鈕主要是切換浮層的轉(zhuǎn)態(tài)阻止事件冒泡定時(shí)器，的含義會(huì)在下一輪事件循環(huán)一開始就執(zhí)行。 浮層效果預(yù)覽 showImg(https://segmentfault.com/img/bVbcDBw?w=163&h=64); 實(shí)現(xiàn)了：. 點(diǎn)擊按鈕彈出浮層. 點(diǎn)擊別處關(guān)閉浮層. 點(diǎn)擊浮層時(shí)，浮層不得關(guān)閉. 再次點(diǎn)擊按鈕，浮層消失 要...

    Taste 評(píng)論0 收藏0

  • 簡(jiǎn)單浮層制作

    摘要：小知識(shí)透明的在中的像素小一些，背景色變一下，這樣邊框自然出來(lái)了點(diǎn)擊按鈕主要是切換浮層的轉(zhuǎn)態(tài)阻止事件冒泡定時(shí)器，的含義會(huì)在下一輪事件循環(huán)一開始就執(zhí)行。 浮層效果預(yù)覽 showImg(https://segmentfault.com/img/bVbcDBw?w=163&h=64); 實(shí)現(xiàn)了：. 點(diǎn)擊按鈕彈出浮層. 點(diǎn)擊別處關(guān)閉浮層. 點(diǎn)擊浮層時(shí)，浮層不得關(guān)閉. 再次點(diǎn)擊按鈕，浮層消失 要...

    Eidesen 評(píng)論0 收藏0

  • 簡(jiǎn)單浮層制作

    摘要：小知識(shí)透明的在中的像素小一些，背景色變一下，這樣邊框自然出來(lái)了點(diǎn)擊按鈕主要是切換浮層的轉(zhuǎn)態(tài)阻止事件冒泡定時(shí)器，的含義會(huì)在下一輪事件循環(huán)一開始就執(zhí)行。 浮層效果預(yù)覽 showImg(https://segmentfault.com/img/bVbcDBw?w=163&h=64); 實(shí)現(xiàn)了：. 點(diǎn)擊按鈕彈出浮層. 點(diǎn)擊別處關(guān)閉浮層. 點(diǎn)擊浮層時(shí)，浮層不得關(guān)閉. 再次點(diǎn)擊按鈕，浮層消失 要...

    Jeff 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<