1

重複の可能性：
現在実行中のスクリプトをロードしたスクリプトタグを参照するにはどうすればよいですか？

サーバーサイドとの対話なしでPHP風のinclude（）を作成する方法として、AJAXを介してページにhtmlドキュメントを含むjavascript関数を作成しようとしています。関数が呼び出されたページ上の場所にファイルをスクリプトに含める必要があります。これが私の関数です（ajaxが有効なxmlhttpオブジェクトであると仮定します）：

function include(src, elem){
    ajax.open('GET', src, false);
    ajax.send(null);
    elem.innerHTML = ajax.responseText;
}

したがって、これは、クリックされたときにdiv内の「src.html」の内容を出力します。

<div onclick="include('src.html', this);"> </div>

しかし、ページが読み込まれるときに読み込むようにします。divにonloadイベントがないことを考えると、スクリプトをdivに含める必要があります。これは問題ありません。

<div id=write>
    <script>include('src.html', this);</script>
</div>

ただし、スクリプトには、呼び出し元のdivへの参照がありません。確かに、divにIDを入れてそれを関数に渡すことはできますが、したくありません。正体不明の要素からこれを呼び出せるようにしたいと思います。何か案は？

4

4 に答える 4

1

data-実行するスクリプトを指定する属性を使用するように div (または他の要素) を変更できます。

<div data-include="src.html"></div>

</body>次に、その属性を持つすべての要素を検索するページ (または終了タグの直前のスクリプト ブロック) のオンロード スクリプトを実行します。

var elements = document.querySelectorAll("[data-include]");
for (var i = 0; i < elements.length; i++)
    include(elements[i].getAttribute("data-include"), elements[i]);

これは上記のデモです（include()Ajaxを実行するのではなく、必要なソースURL文字列を要素に入れるだけのダミー関数を使用していますが、要素が正しく選択されていることを示しています）：http://jsfiddle.net/nnnnnn/gm2LN/

簡単にするために、要素を選択するために使用しましたが、IE7 以前ではサポートされていないquerySelectorAll()ことに注意してください。しかし、古いブラウザをサポートしたい、またはサポートする必要がある場合は、他の要素選択方法に置き換えることができます。

于 2012-09-06T23:53:25.413 に答える
0

ページが読み込まれると、すべてのスクリプトが解析されるとすぐに順次実行されます。したがって、現在実行されているスクリプトを取得するには、DOM で明らかな最後のスクリプトを取得する必要があります。

var script = document.scripts[document.scripts.length-1];
ajax(url, function successCallback(html) {
    script.insertAdjacentHTML("afterend", html);
});

(テストするデモdocument.scripts- FF 9+ が必要であることに注意してください)

ただし、 serverside を使用しない理由はありませんinclude()。

于 2012-09-06T23:53:38.890 に答える
0

ここ：

<div id=write>
    <script>include('src.html', this);</script>
</div>

"this" は window オブジェクトを指します。script 要素に id を付けて、次のようにすることを考えています。

<div id=write>
    <script id='test'>include('src.html', document.getElementById('test').parentNode);</script>
</div>

「include」関数の elem は、スクリプト要素を含む div を指すようになりました。この場合、まだ id に依存していますが、div 側には依存していません

于 2012-09-06T23:53:59.233 に答える
0

nnnnnn は当たりだったのですが、私はとてもソフトに修正しました。最終的に、src 属性を持つインクルード タグを作成しました。ページロード時に、すべての「include」タグをループして、src 属性のデータを入力します。

function include(src, elem){
    ajax.open('GET', src, false);
    ajax.send(null);
    elem.innerHTML = ajax.responseText;
}

window.onload = function(){
    var includes = document.getElementsByTagName('include');

    for(var i = 0; i <= includes.length; i++){
        var elem = includes[i];     
        var src = elem.getAttribute('src');
        include(src, elem);
    }

}

次に、html ファイルを含めたい場所に、カスタム要素を含めます。

<include src='includeme.html'> </include>

実際には、これにより少しポップアップが生成されますが、私のアプリケーションでは問題ありません。

助けてくれてありがとう！

于 2012-09-07T00:39:18.463 に答える