2017-01-11 11 views
1

ユーザーが新しいページ全体を読み込むのではなくリンクをクリックすると、新しいページのHTMLデータがajaxリクエストでロードされます。ナビゲーションバーのデータを毎回送信しないようにする)ajaxリクエストの結果データをDOMParserに渡して、 "content"というIDを持つdivからコンテンツを取得し、現在のドキュメントの "context" divのinnerHTMLを置き換えます。Javascript - DOMパーサーはajaxリクエストをロードし、スクリプトは実行しない

newDOM内のスクリプトタグはコンテンツdivに入れても実行されませんが、この方法でリクエストした後でも、変数「rawhref:あなたは即座に文書を編集するスクリプトを持っている場合、それはあなたが

AjaxRequest(href, function(data) { 
    var parser = new DOMParser(); 
    var newDOM = parser.parseFromString(data.responseText, "text/html"); 

    //Setup new title 
    var title = ''; 
    if (newDOM.getElementsByTagName('title').length > 0 && newDOM.getElementsByTagName('title')[0] !== null) { 
    title = newDOM.getElementsByTagName('title')[0].innerHTML; 
    } else { 
    title = rawhref; 
    } 

    document.title = title; 
    history.pushState({}, title, rawhref); 

    if (newDOM.getElementById('content') === null) { 
    //If there is an error message insert whole body into the content div to get full error message 
    document.getElementById('content').appendChild(newDOM.getElementsByTagName('body')[0]); 
    } else { 
    document.getElementById('content').appendChild(newDOM.getElementById('content')); 
    } 

    MapDOM(); 

    if (typeof(onPageLoad) == "function") { 
    onPageLoad(); 
    } 
    }); 

注newDOMをログアウト効果がないロードしている間のでまた、それはどちらかnewDOMしている間に実行するように見えるん"noheaderのないリクエストURLだけなので、ユーザーは履歴を取り戻すことがより簡単になります。 注:また、新しいロード後には、次の新しいページでこのメソッドを使用できるように、新しいタグを上書きする関数もあります。

また、回答がjQueryを使用しなかった場合は、さらに好ましいでしょう。

+0

新しく追加されたスクリプトタグの_textContent_に 'eval()'を呼び出す必要があります。 – dandavis

+0

@JaromandaX: 'Function'を使うこともできますし、dataURLsはそれが意味するものですか? – dandavis

+0

が必要ですか?あなたはdupeを追加して新しいスクリプトを追加することができますが、jQueryは 'load()'や 'html()'でもeval()を使用しますが、遅いDOMで作業するよりも速くなるはずです... – dandavis

答えて

1

誰かがこれに答えてくれました。私がテストしていた間に、彼らは解決策を削除しました....ええと、ありがとうございました。将来この問題を抱える人は誰でも、なぜそれが働いたのかを完全に理解する時間はなかった....しかし、私はそれを解決することができると思う。

function subLoader(dest, text) { 
    var p = new DOMParser(); 
    var doc = p.parseFromString(text, 'text/html'); 
    var f = document.createDocumentFragment(); 
    while (doc.body.firstChild) { 
    f.appendChild(doc.body.firstChild); 
    } 
    [].map.call(f.querySelectorAll('script'), function(script) { 
    var scriptParent = script.parentElement || f; 
    var newScript = document.createElement('script'); 
    if (script.src) { 
     newScript.src = script.src; 
    } else { 
     newScript.textContent = script.textContent; 
    } 
    scriptParent.replaceChild(newScript, script); 
    }); 
    dest.appendChild(f); 
} 
関連する問題