巧みにiframeでフロート層を作る

iframeの非難が多すぎて、基準が廃棄されていないのは幸いですが、実は少し役に立ちます.製品を開発する時、私たちはいくつかのものを捨てて効率を交換しなければなりません.
私たちのニーズは、特定のシーンで既存のページに弾窓を作ることです.これはよくある運営手段です.乱暴な運営だと思いますが、需要はやはりしなければなりません.
既存のプラットフォームページ:
新しい運用活動ページ:
合成の効果図:
最後の図を見ると簡単な弾層ではないでしょうか.
しかし、この弾層の論理は少なくないでしょう.そして、カード券を受け取る論理を含む専門的なシステム構成によって生成されています.既存のページとはほとんど関係なく、一時的な運営活動にすぎません.このようなアクティブロジックをホームページのロジックに追加する必要はありません.
だから2つのページを合成したほうがいいです.
この一時的な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;

これにより、自分でマスク層を追加する必要があります.そうしないと、2つのページの要素が視覚的に重なって見えます.
作る過程でページがスライドできることに気づき、理想的にはもちろんページをロックします.この時思いついたのは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ボタンを設計し、オフにしました.ここではシーンを分けてやります.一つは同源で、もう一つは同源ではありません.
私たちのこの2つのページは同源で、比較的によくて、親ページを通じて直接サブページを制御して、完全な制御権限です.

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

異なるソースであれば、面倒な点があり、2つのページ間の通信が必要です.

//     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...