■default ---■fontsize --70% --80% --100% --120% --140% --- --■scroll_switch

IEでインラインフレームを後読み込みさせた時ブラウザバックに登録されてしまう不具合解決メモ

IEでインラインフレームを後読み込みさせた時ブラウザバックに登録されてしまう不具合解決メモ

PHPで例えば50個のリストを繰り返し表示するとして、
そのリストごとの値を基にしてdatabaseからデータを見つけて、
詳細を小ウインドウで出したりすることが有ります。

そうすると、50回databaseにアクセスするので、結構時間がかかります。
一回0.01秒でも、0.5秒かかります。
かといって、一発で終わらせるSQLは複雑すぎるし、表示の処理も複雑になって、
逆に遅くなったりします。

なので、ページ上で非同期させるためにインラインフレームを使います。
小ウインドウの表示の部分を別ページにして、インラインフレームで読み込み。
そうすると、元ページのPHPの処理時間は格段い早くなります。
ところが、一見早くなったと思いきや、
ブラウザはインラインフレーム内のページを全部読み込まないと、
表示を始めてくれません。
表示はしてくれますが、なんかあんまし動きません。scrollとかジャバスクリプトとか。

そこで、読み込みにディレイをかけます。
遅延読み込みですね。
遅延読み込みの仕方はいろいろあるみたいですが、
・Lazy Load Plugin for jQuery
・Lazy.js
とか
jQuery はいまだによく分からないし、Lazy.jsも試したけどやり方がよく分からないので動きません。

なので

/*----------------------delay_data_to_property.js--*/
var reset_date_value_ar = ["src","width","height"];
function reset_date_value(ov){
for (var j in reset_date_value_ar ){if(ov.dataset[reset_date_value_ar[j]] ){ov[reset_date_value_ar[j]] = ov.dataset[reset_date_value_ar[j]] ;} }
/*
var ic = 0;
var sid = setInterval(function() { if(ifm_ar[ic].dataset ){reset_date_value(ifm_ar[ic++])}; if (ic > ifm_ar.length ) { clearInterval(sid); }}, 5);
*/
}
/*------------------------*/
function delay_data_to_property(){
var ifm_ar = any_tag_collection("iframe.img");
for (var i in ifm_ar ){if(ifm_ar[i].dataset ){reset_date_value(ifm_ar[i]);}}
}
/*------------------------*/
function any_tag_collection(sar){
if (typeof sar == "string"){tags = sar.split(".");}
else if(typeof sar == "array" || typeof sar == "object"){tags = sar;}
else{tags = ["*"];}
var element_s = [];
for (var i in tags) {if(tags[i]){ element_s = element_s.concat( [].slice.call(document.getElementsByTagName(tags[i])));}}
return element_s;
}
/*------------------------*/
window.addEventListener( 'load', delay_data_to_property, false );
/*
delay_data_to_property();
*/


/*------------------------*/
のようなスクリプトを書いて、やってみたらわりとあっさりできました。
< iframe src="とりあえず出すURL" height="10" width="10" data-src="読み込み後のURL" data-height="200" data-width="250" id="" seamless rel="noreferrer" referrerpolicy="no-referrer" >


----------------------------------------------
とここまではいいのですが、これを動かしたら
クロームではOKなのですが、
IEだと、インラインフレームのURLがブラウザバックヒストリーに登録されてしまい、実質「戻るボタン」が聞かなくなります。
後読みした分だけ、戻るを押さないといけない。

厳密に言うと、どうやら、タイミングのもんだいなのか、全部が登録されるわけではなく、
10件くらいというなんとも、中途半端な。
バグなのでしょうか。

ちなみに、イメージの置き換えはそんな事は有りません。インラインフレームだけ。

で、
history.pushState
などで、ヒストリー操作したりだとか
<meta name="referrer" content="no-referrer">
をフレームのページに入れて、リファラーを送らないようにしてみたり、
タグ自体を丸ごと書き換えて、 src=をそのままにして、インラインフレームに置き換えてみたり、
しましたが、全く直りません。

確かに、環境変数には登録されなくなります。
でも、もともとクロームの方は問題ないので、リファラーがどうとかでは無いようです。

ジャバスクリプトの
history.pushState
関係だと、戻るのを防ぐようにはできるようですが、動きが怪しい事この上なくなり、
PHPの登録機能などを考えると怖くてNG。

-------------------
で、解決編ですが。
1.オンロードに登録しない
window.addEventListener( 'load', delay_data_to_property, false );
を消す。
2.スクリプトの読み込みをHTMLの最後にする。
</body>
</html>
<script language="javascript" src="delay_data_to_property.js">

こんな感じ。
---------------------
あほらしいですが、これで直りました。
最近は、私が知らなかっただけで昔からかもしれませんが、
ジャバスクリプト外部ファイルは後ろの方でも問題ないみたいで、
というか、むしろ読み込みが早くなってそっちの方が良いみたいで、
ついでに、全部HTMLの後ろの方にまとめました。

どうやら、loadした後に、読み込んだURLは全部
ブラウザヒストリーに登録される様子です。
IE10以上の場合。

なので、loadする前に読み込みしなおし。
ディレイかけないのと、状況的には変わりないような気がしますが、
一応描写はscrollとかできる状況でッパっと出てくるし、良いみたいです。

ただなんというか、読み込みまでにとりあえず表示する画像を用意したのですが、
早すぎてそれが表示されないので、ちともったいないです。
imgのほうならそれでOK。

ちなみに、

for (var j in reset_date_value_ar ){if(ov.dataset[reset_date_value_ar[j]] ){ov[reset_date_value_ar[j]] = ov.dataset[reset_date_value_ar[j]] ;} }
では無く
var ic = 0;
var sid = setInterval(function() { if(ifm_ar[ic].dataset ){reset_date_value(ifm_ar[ic++])}; if (ic > ifm_ar.length ) { clearInterval(sid); }}, 5);

の方を使うと、一個ずつじゅんぐり読み込んでくれるようになるのですが、

オンロードが完了したタイミング以降に読み込んだやつはやっぱり
ブラウザヒストリーに登録される様子です。
よく分かりません。
スポンサーサイト
ブログ内検索ワード
マジック / フラリッシュ / デザイン / ~のコツ / プログラム関連 /