iframeベースのモバイルエンドネスト

2782 ワード

iframe

需要説明
先週、新しいプロジェクトに接続されました.モバイル側は下部に5つのナビゲーションを行う必要があります.異なるナビゲーションページの本体をクリックして異なるページを表示します.そのうち、2つのページは自分で作成しますが、他の3つのページは他の3つのウェブサイトを参照します.そのうち、2つのウェブサイトは内部プロジェクトで、もう1つは外部です(ドメインをまたいでいます).
に質問
再三考えて最も時間コストを節約したのはiframeを使うことで、モバイル側で使うのは、私の心の中では拒否していますが、他の案を調査しても現状に合わないことがあります.クリックするたびに新しいiframeをロードして、怠け者なので、2つの新しいページもiframeにして、する過程で以下の問題が発生して、ここでまとめます:1.埋め込まれたiframeページはスクロールできません.meta要素のontentが一致せず、外部のページはwidth=device-widthを使用するが、参照するページの1つのwidth=640は、そのページがレンダリングされたときに全画面縮小できない.iosの下のページの1つがわけのわからない拡大4.iframeのページaラベルのアンカーポイントが無効になります.aをクリックしてaのiframeページをロードすると、bに切り替わると、bページのフォントが不思議に大きくなります.ナビゲーションバーにはスタイルの要求があり、activeの場合iconは赤いiconであり、他の状態では灰色である.その中の1つの需要は、戻るときにどこからどこへ戻るかです.あるアンドロイドが戻ってiframeを再ロードできません
解決する
宣言埋め込まれたiframeページのうち4つは内部プロジェクトであり,同源であるため,処理された問題の大部分はドメイン間問題が存在しない.
1.埋め込まれたiframeページはスクロールできません
iframeの外側にdivを包み、スクロール可能に設定します.


    
</div></code></pre>  <br>また、ブラウザのデフォルトの  を  します.そうしないと、  のように  までスライドすると、リバウンドの  と  します.<pre><code>$('body').on('touchmove',function(e){
    e.preventDefault();
});</code></pre>  <br>2.meta  のontent   <br>これはしばらく い  がなくて、iframeレンダリングのmetaもデフォルトで いている   のmetaなので、   の  metaは  して、このプロジェクトは  の  に して、コードを  する  があるので、  に はこのページのmetaを   して、このページのスタイルを き しました.<br>3.iosの のページの1つがわけのわからない  <br> べてみると、タイトルのようなwhite-space:nowrapやiframeページにはswiperで  された が100%で、   が  bodyのために100%に  されている  、iosでiframeして のページが  することがわかりました. の   は、 のプロジェクトの のページhtmlで、bodyは  として100%に  されていますが、    にjsは  の を  してbodyの を  します.<br>4.iframeのページaラベルのアンカーが  になった<br>iframeがドメイン に  しない  、ネット に  コードがあればaラベルを   することができ、ドメイン では  できない.ドメイン の  、  ページはiframeの の  を  できないため、  にこのナビゲーションは  ジャンプをした.<br>5.iframeページ り えの  、 り え のページスタイルが となく きくなる<br>  はページ り えをしていましたが、iframeを ロードせずにiframeのurlを    したことがありますが、この  、 のページにロードしたcssが  にクリアされていない   があるので、cssが  している   があります.だから  に り えるたびに、  iframeはremoveに ち、appendに しいiframeをロードします.<br>6.ページをクリックしてジャンプした 、 るステータスマーク<br>localStorageを  してurl,navIndexを  しました<br>7.あるアンドロイドが ってiframeを ロードできません<br> ってからappendのiframeのコードの で レンダリングさせます<pre><code>$("#iframe").attr("src",url).ready()</code></pre>  <br>8.その <br>iframe    の  <pre><code>document.getElementById('iframe').onload = function(){
let doc = document.getElementById('iframe').contentDocument;
 }</code></pre>  <br>  はドメイン リクエストに  しており、バックグラウンドインタフェースは から かれているため  できないが、 された   の   けインタフェースのデフォルトの  はgbkであるため、scriptCharset:'gbk'を  する  がある.<pre><code>$.ajax({
    type: "GET",
    url: url,
    dataType: "jsonp",
    jsonp: "callback",
    jsonpCallback: "data_callback",
    contentType: "application/x-javascript,charset-type=gbk",
    scriptCharset: 'gbk',
    crossDomain: true,
    success: function (json) {});
});</code></pre>

npm から取得した Node-RED をカスタマイズして起動する(1)

PHPで空の配列を初期化する最適な方法をまとめる