13

多くの Web サイトを調べましたが、どれも正しく機能していないように見えたり、理解できなかったりします。特定の iframe を更新するシンプルなボタンが欲しいです。ボタンは親ページにあり、iframe 名は「Right」です。

4

2 に答える 2

24

これを行うには多くの方法があります。このマークアップを想定するとiframe:

<iframe name="Right" src="http://www.example.com"></iframe>

関数呼び出しでそれを行うことができます:

HTML

<button onclick="refreshIframe();">Refresh Iframe</button>

JS

function refreshIframe() {
    var ifr = document.getElementsByName('Right')[0];
    ifr.src = ifr.src;
}

またはインライン JSを使用:

<button onclick="var ifr=document.getElementsByName('Right')[0]; ifr.src=ifr.src;">Refresh Iframe</button>

または、イベント リスナーを使用します。

HTML

<button id="iframeRefresher">Refresh Iframe</button>

JS

window.onload = function() {
    document.getElementById('iframeRefresher').addEventListener('click', function() {
        var ifr = document.getElementsByName('Right')[0];
        ifr.src = ifr.src;
    });
}

上記と同じですが、IE <= 8 がサポートされ、匿名の代わりにグローバル スコープの関数をハンドラーとして使用するようになりました。

HTML

<button id="iframeRefresher">Refresh Iframe</button>

JS

window.onload = function() {
    var refresherButton = document.getElementById('iframeRefresher');
    if (refresherButton.addEventListener)
        refresherButton.addEventListener('click', refreshIframe, false);
    else
        refresherButton.attachEvent('click', refreshIframe);
}

function refreshIframe() {
    var ifr = document.getElementsByName('Right')[0];
    ifr.src = ifr.src;
}

jQueryやその他のライブラリに触れることなく、これらすべてを実行できます。

これらのうちどれを使用する必要がありますか? 保守性と可読性が高いと思われる方。可能な限りグローバル変数を避けてください。個人的には、マークアップでインライン JS を使用することは避けたいと思います。リスナーは不要に思えますが、それは私だけの話です。より適した方を選択してください。

于 2012-07-02T02:27:36.150 に答える
-3

idiframeに new を追加し、以下のコードを試してください。

var iframe = document.getElementById('FrameId');
$("button").click(function() {
    iframe.src = iframe.src;
}):
于 2012-07-02T01:54:42.810 に答える