0

私は一般的にJavascriptにかなり慣れていないので、このサイトで主に見られるものから小さなスクリプトをまとめて、小さなiframeを取得して一連のリンクを循環させようとしました。ただし、ユーザーが iframe またはそのコンテンツのいずれかをクリックすると、循環を停止することも必要です。

ここに私がこれまでに持っているコードがあります。HTML ページには iframe が 1 つしかありません。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8">
<!--
var sites = [
  "side/html5.html",
  "side/silverlight.html",
  "side/wordpress.html",
  "side/mysql.html",
  "side/php.html",
  "side/css3.html"
];
var currentSite = sites.length;
var timerId;
var iframeDoc = $("iframe").contents().get(0);

$(document).ready(function ()
{
  var $iframe = $("iframe").attr("src","side/html5.html");

  timerId = setInterval(function()
  {
    (currentSite == 0) ? currentSite = sites.length - 1 : currentSite = currentSite -1;
    $iframe.attr("src",sites[currentSite]);
  }, 4000);

  $(iframeDoc).bind('click', function()
  {
    clearInterval(timerId);
  });

});
//-->
</script>
</head>

<body>

<sidebar>
<iframe name="sideframe" src="side/html5.html"></iframe>
</sidebar> ..etc..

助けてください。できるだけ早く Javascript を学ぼうとしていますが、私が見る限り、うまくいくはずですが、実際にはうまくいきません。

あなたが私に与えることができる助けをありがとう、それは本当に感謝しています.

編集：

さて、私は新しいスクリプトを手に入れました。これは主に Elias の作品に基づいていますが、どちらも機能しません。私はそれを Firebug に固定しました。timerCallback.currentSite の値が適切に更新されていると言っていますが、明示的にチェックする $iframe の src 値が見つかりません。私が知る限り、変数は適切に更新されていますが、iframe が適切に更新されていません。このコードで iframe を正しく呼び出し/設定していますか? また、リンクされたjqueryライブラリは私の目的に十分ですか? リンクするこれらすべてのライブラリについて少し迷っています...

<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript" charset="utf-8">

<!--

var sites = 
[
  "side/html5.html",
  "side/silverlight.html",
  "side/wordpress.html",
  "side/mysql.html",
  "side/php.html",
  "side/css3.html"
];

var $iframe = $("iframe").attr("src","side/html5.html");

function timerCallback()
{
    timerCallback.currentSite = (timerCallback.currentSite ? timerCallback.currentSite : sites.length) -1;
    $iframe.attr("src",sites[timerCallback.currentSite]);

    $($('iframe').contents().get('body')).ready(function()
    {
        $(this).unbind('click').bind('click',function()
        {
            var theWindow = (window.location !== window.parent.location ? window.parent : window);
            theWindow.clearInterval(theWindow.timerId);
        });
    });

}

var timerId = setInterval(timerCallback, 4000);

//-->

</script>
4

2 に答える 2

1

私があなたなら、安全にプレイします。あなたは JS にかなり慣れていないと言うので、非常に参考になるかもしれません。

function timerCallback()
{
    timerCallback.currentSite = (timerCallback.currentSite ? timerCallback.currentSite : sites.length) -1;
    $iframe.attr("src",sites[timerCallback.currentSite]);
}
var timerId = setInterval(timerCallback, 4000);
$($('iframe').contents().get('body')).unbind('click').bind('click', function()
{
    var theWindow = (window.location !== window.parent.location ? window.parent : window);
    theWindow.clearInterval(theWindow.timerId);
});

ここで、このコードはまったくテストされていないことを認めなければなりません。私はそれがあなたの道を歩むためにいくつかのことを提供すると思いますが：

1) 間隔はコールバック関数を使用して設定されます。これは、多くの理由で優れているためです。

1b) そのコールバックでは、関数がオブジェクトであるという事実を利用して、サイト配列の長さ (未定義または 0 の場合) に設定された静的変数を作成しました。どちらの場合も 1 が減算されます

2) jQuery の,get()メソッドは、jquery オブジェクトではなく DOM 要素を返します。そのため$()、新しい jQ obj でラップして、必要なメソッドを提供します。

3) iFrame 内で dom を操作しているため、バインドしたいイベントのバインドを解除するのが最善です

4) iFrame 内では、間隔がある親ウィンドウに直接アクセスすることはできません。

iFrame の扱い方を読んでおくとよいかもしれません。

編集: David Diez は正しいです。これを回避する最も簡単な方法は、バインディングをタイムアウト関数に組み込むことです。

function timerCallback()
{
    timerCallback.currentSide = ...//uncanged
    //add this:
    $($('iframe').contents().get('body')).ready(function()
    {
        $(this).unbind('click').bind('click',function()
        {
            //this needn't change
        });
    });
}

理論的には、これにより、クリック イベントがロードされた後にボディにバインドされるはずです。

編集2

私は少しいじっていますが、コードをそのままにしておくことができます。関数を追加するだけです：

function unsetInterval()
{
    window.clearInterval(window.timerId);
}

これを setInterval 関数に追加します。

$('#idOfIframe').load(function()
{
    var parentWindow = window.parent;
    $('body').on('click',function()
    {
        parentWindow.clearInterval();
    });
});

これは、iFrame コンテンツが読み込まれるとすぐにトリガーされ、クリック イベントをバインドし、タイマーの設定を解除します。

于 2012-04-20T11:48:39.550 に答える
1

このため、コードが機能していないと思います

var iframeDoc = $("iframe").contents().get(0);

iframeDoc値をiframeの最初の子であるheadタグに保存しているため、これはiFrameのヘッダーを取得している可能性があります。実際には、ウィンドウに複数のiframeがある場合、iframeDocはドキュメントのすべてのiframeを取得するundefinedためです。$("iframe")

BTW your currentSite value condition is wrong, you asign the same value for both conditions

ここで例を挙げます。

<iframe id="myFrame" src="http://www.google.com/"></iframe>

そしてスクリプト：

<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript">

var sites = [
"site1",
"site2"
];

var myFrame = document.getElementsByTagName('iframe')[0];
var currentSite = myFrame.getAttribute('src');
var timerId;

var myFrameDoc = window.frames[0].document;

$(document).ready(function()
{
    myFrame.setAttribute('src', 'side/html5.html');

    timerId = setInterval(function()
    {
        //WRONGG
        (currentSite == 0) ? currentSite = sites.length - 1 : currentSite = currentSite -1;
        myFrame.setAttribute('src', sites[currentSite]);
        $(myFrame).off("click").on("click", clearInterval(timerId));
    }, 4000);

    //Won't work because you are trying to get events from an inside of a iframe
    //$(myFrameDoc).on("click", clearInterval(timerId));
    //This may work
    $(myFrameDoc).off("click").on("click", clearInterval(timerId));
});

</script>

iframe のイベントを追跡しようとするときは、注意が必要です。なぜなら、iframe には JavaScript 目的のためのまったく異なるドキュメントが含まれているため、基本的には新しいドキュメント内に入り、使用する必要があるイベントのバインドを解除し、それらを再びバインドする必要があるからです。 @Eliasが指摘するように、あなたの機能。ただし、iframe の src を常に変更していることに注意してください。そのため、本当にそれを行う必要がある場合は、clearInterval のバインドを解除して再度バインドするコードを分離する必要があり$.on()ます。

編集: iframe の src が同じドメイン内にあり、同じポートと同じプロトコルを使用している場合、iframe の呼び出しは次のように機能するはずです。

var myFrameDoc = window.frames[0].document;

クリック イベントを iframe ではなく iframe のドキュメントにバインドおよびバインド解除するため、新しい変数を追加しました。そのために window.frames コレクション プロパティを使用しますが、アクセスしようとすると、最新のブラウザーは例外をスローし、アクセスを拒否します。フレームに送信され、同じポートと同じプロトコルを使用して同じドメインにいません...

さらに、 and の代わりに and を使用するの$.on()は$.off()、$.bind最初$.unbind()のものは新しいものであり、ここでは使用していませんが、新しい要素が追加された場合にバインドする DOM を常に監視できるためです。このコードがまだ機能しない場合、このケースに役立つ可能性があります。その場合でも、これを変更できます。

var myFrameDoc = window.frames[0].window;

この：

$(myFrameDoc).off("click", "document").on("click", "document", clearInterval(timerId));

これにより、イベント ハンドラーが新しいドキュメントの追加に再バインドされます。テストされていませんが、動作する可能性があります。

于 2012-04-20T11:25:32.440 に答える