0

JavaScript を使用してページ上の要素に ajax HTML コンテンツをロードし、ロードされたコンテンツ内で JavaScript を実行しようとすると問題が発生しますが、これは機能していません。

私はこのプロジェクトで jQuery を使用していません (使用できません)。

ajax コンテンツをロードするために使用している JavaScript は次のようになります。

var loadedobjects = "";
var rootDomain = "http://" + window.location.hostname;

function ajaxPage(url, containerId){
    var pageRequest = false;
    pageRequest = new XMLHttpRequest();

    pageRequest.onreadystatechange = function(){
        loadpage(pageRequest, containerId);
    }

    preventCache = (url.indexOf("?")!=-1)? "&"+new Date().getTime() : "?"+new Date().getTime();
    pageRequest.open('GET', url+preventCache, true);
    pageRequest.send(null);
}

function loadpage(pageRequest, containerId){
    if (pageRequest.readyState == 4 && (pageRequest.status==200 || window.location.href.indexOf("http") == -1)){
        document.getElementById(containerId).innerHTML = pageRequest.responseText;
    }
}

ご覧のとおり、(HTML ページの) URL を関数に渡しています。ajaxPage()

関数は、次のajaxPage()ように別の .js ファイルで呼び出されています。

ajaxPage('test.html', 'ajax-wrapper');

これは機能していますが、test.htmlは ID ' ajax-wrapper ' の要素に読み込まれていますが、 test.htmlページの JavaScript は機能していません。

test.htmlページは次のようになります (プレーンな HTML のみ):

<div class="t-page-title">
    View Thread
</div>

<script>
    alert('hello');
</script>

alert('hello');ロードされた HTMLの単純なものでも起動しません。ページはキャッシュされていないため、問題はありません。jQuery を使用している場合はどうすればよいかはわかりますが、JavaScript のみの解決策を見つけるのに少し困惑しています。助言がありますか？

4

1 に答える 1

1

innerHTMLを使用すると、タグは宛先要素にコピーされますが、スクリプトは実行されません。スクリプトを実行するには、追加の評価ステップが必要です。

jQueryにはglobalEvalと呼ばれる関数がありますが、jQueryがないと、独自の関数を作成する必要があります。

[更新]問題の解決に役立つ可能性のあるiframeのバリエーションは次のとおりです：http：//jsfiddle.net/JCpgY/

あなたの場合：

ifr.src="javascript:'"+pageRequest.responseText+"'";

divを使用した標準の動作：http：//jsfiddle.net/JCpgY/1/

于 2012-12-12T21:48:47.520 に答える