1

外部プロジェクトページへのリンクを含むページがあります。これらのプロジェクト ページは、関数を通じて div に読み込まれます。

function clickEv(foo) {
    $('#loadContent').load('sub/'+foo+'.html').fadeIn('fast');
    window.location.hash = foo;
}

これらのプロジェクト ページにはすべて同じテンプレートがあり、左側に text-div、右側に画像 div があります。私がやりたいのは、image-div のスライダーを含めることです。このスライダーは、外部の JavaScript ファイルです。

$(function() {
var sliderUL = $('.imageBrowser').children('ul'),
    imgs = sliderUL.find('img'),
    imgWidth = imgs[0].width, 
    imgsLen = imgs.length, 
    current = 1,
    totalImgsWidth = imgsLen * imgWidth;

$('#sButtons').find('div').on('click', function() {
    var direction = $(this).data('dir'),
        loc = imgWidth;

    // update current value
    ( direction === 'next' ) ? ++current : --current;

    // if first image
    if ( current === 0 ) {
        current = imgsLen;
        loc = totalImgsWidth - imgWidth;
        direction = 'next';
    } else if ( current - 1 === imgsLen ) {
        current = 1;
        loc = 0;
    }

    transition(sliderUL, loc, direction);
});

最初に、div 'imageBrowser' 内の順序付けられていないリストで画像を見つけてから、div 'sButtons' 内の前と次のボタンでどこに行くかを決定します。繰り返しますが、すべてのプロジェクト ページは、div とリストで同じテンプレートを使用します。

このslider.jsファイル<script>を、プロジェクトページファイルの先頭にタグを付けて添付し.getScript()、初期clickEv(foo)関数内に含めることを試みました。ただし、最初の では機能しないようです。.load()これは、div の imageBrowser と sButtons が元の html ファイル内にまだ存在しないためだと思いますか? 同じプロジェクト ページのリンクをもう一度押して、ファイルを 2 回目に読み込むと、スライダーは意図したとおりに機能します。すべてのプロジェクト ページで同じです。たとえば、project-page1 を開く - スライダーが機能しない、project-page2 を開く - スライダーが機能しない、project-page1 をもう一度開く - スライダーが機能する、project-page2 を開く再び - スライダーが動作します。ここでページ 1 に戻ってもスライダーは機能しますが、ページ 3 を開くと再び機能しません。

実現不可能なことをしようとしていますか、それとも何が間違っていますか?

// 編集

問題は、コンテンツがロードされる前にスクリプトが実行されていたことです。したがって、要素から情報を取得しようとした変数は、キャッシュから読み込まれたときにのみ機能し始めました。

私がしたことは、プロジェクト ページ内onload="$.getScript('src/slider.js')"の最初のファイルに追加することでした。<img>したがって、スクリプトは必要な要素がロードされた後に実行されます! 皆さんのおかげで、私はパフォーマンスのためにその iframe を引き続き検討します。

4

1 に答える 1

1

インポートするファイルに JavaScript を含める場合 (ファイルへのリンクではなく生の JavaScript)、次のようにスクリプト タグ内のコードを評価できます。

var scripts = document.getElementByTagId("loadContent").getElementsByTagName("script");
for(i = 0; i < scripts.length; i++){
  eval(scripts[i].innerHTML);
}

すべてのブラウザでテストしたわけではありませんが、Chrome と FF で動作します

理論的には、読み込まれたコンテンツは既にページに追加されているため、スクリプトを評価する前に動作するはずです。

于 2012-04-04T14:58:55.167 に答える