web-dev-qa-db-ja.com

iframeが新しいURLの読み込みを開始するタイミングを検出する

ページ上のiframeを検出するにはどうすればよいですかstarts新しいページをロードするには？

私たちの状況は次のとおりです。

  • IFrameコンテンツが変化し始めたら、「読み込み中」のアニメーションを表示し、検索ボックスを非表示にする必要があります。
  • 「iframeは読み込みを終了しました」イベントを処理する方法（アニメーションを非表示にする）を知っていますが、最初の「変更を開始する」イベントをキャッチする方法は知りません...

注：メニューのリンクにjqueryの「クリック」フックを追加すると、機能します。ただし、iframeコンテンツ内には多くの相互参照リンクがあり、「変更」イベントもそれらに適用されます！したがって、ユーザーがiframe内のリンクをクリックするまたはiframe srcがjavascriptを介して変更されるの場合、イベントをキャッチする必要があります。これは、loading-animationと検索ボックスを非表示にします。

javascriptjqueryeventsiframe
39
Philipp

Iframeとコンテナページが同じOriginで、内側のページに余分なコードを挿入する必要がない場合、より良いソリューションを見つけました：

<iframe src="same-Origin.com" onload="content_finished_loading(this)"></iframe>
<script>
    var indicator = document.querySelector('.loading-indicator');
    var content_start_loading = function() {
        indicator.style.display = 'block';
    };

    var content_finished_loading = function(iframe) {
        indicator.style.display = 'none';
        // inject the start loading handler when content finished loading
        iframe.contentWindow.onunload = content_start_loading;
    };
</script>
24
Bruce

私は次の解決策を思い付きました-これは、iframeコンテンツとホストウィンドウのコンテンツを制御するためにのみ可能です

Iframe内で、次のスクリプトをページフッターに追加します（すべてのページが同じテンプレートを使用するため、これは単一ファイルの変更です）

<script>
window.onunload = function() {
    // Notify top window of the unload event
    window.top.postMessage('iframe_change', '*');
};
</script>

ホストウィンドウ内にこのスクリプトを追加して、iframeの状態を監視します

function init_content_monitor() {
    var content = jQuery('.iframe');

    // The user did navigate away from the currently displayed iframe page. Show an animation
    var content_start_loading = function() {
        alert ('NOW: show the animation');
    }

    // the iframe is done loading a new page. Hide the animation again
    var content_finished_loading = function() {
        alert ('DONE: hide the animation');
    }

    // Listen to messages sent from the content iframe
    var receiveMessage = function receiveMessage(e){
        var url = window.location.href,
            url_parts = url.split("/"),
            allowed = url_parts[0] + "//" + url_parts[2];

        // Only react to messages from same domain as current document
        if (e.Origin !== allowed) return;
        // Handle the message
        switch (e.data) {
            case 'iframe_change': content_start_loading(); break;
        }
    };
    window.addEventListener("message", receiveMessage, false);

    // This will be triggered when the iframe is completely loaded
    content.on('load', content_finished_loading);
}
23
Philipp

Iframeを動的に作成する場合、次のようにONLOADイベントを含めます...

F=document.createElement('iframe');
F.onload=function(){
    UpdateDetails(
        this.contentWindow.document.title,
        this.contentWindow.location
    );
};
F.src='some url';
document.getElementById('Some_Container').appendChild(F);

Onloadイベントは、ユーザーがネットをサーフィンするときに、以下の関数を介して以下のグローバル変数を絶​​えず更新します。

var The_Latest_Title='';
var The_Latest_URL='';
function UpdateDetails(Title,URL){
    The_Latest_Title=Title;
    The_Latest_URL=URL;
}
0
user6242961

iFrame src change event detection？ で可能な解決策が既にあります

ただし、ターゲットページを操作する場合は、iframeターゲットファイルのコンテンツに触れる必要はありません。親ページに正しいJSコードを追加するだけで、Same-Origin iframeにアクセスできます。私はこのようなものを使用しました：

<iframe id="xyz" ....>
.....
<script>
var iframeElement = document.getElementById("xyz");
var iframe_El = iframeElement.contentDocument || iframeElement.contentWindow.document;
// manipulate iframe_El wih "on complete" events and like that.
....
</script>

詳細： https://jsfiddle.net/Lnb1stc8/

0
T.Todua