javascript - a 要素をクリックしたときに iframe src をリロードする

Question

ユーザーがクリックしたときに iframe src を要素の href 属性に置き換えることは可能ですか?

私はこのコードを持っています

http://jsfiddle.net/6Hv9P/1/

ユーザーがduckduckgoを使用して検索できるようにしようとしています。結果をクリックすると、iframe srcがhref値に置き換えられます。

Answer 1

私があなたを正しく理解していれば、あなたがやろうとしているのは、 内でページがいつ変更されたかを検出し、その の属性iframeから新しいページの URL を取得することだと思います。srciframe

src残念ながら、ページが変更されたときにブラウザが属性を更新しないため、運が悪いと思います。iframeまた、 内のページが親ページと同じドメインに属していない限り、ブラウザーのセキュリティdocument.location.hrefにより、新しいページから を検出できなくなります。

Answer 2

確かに可能です。このようなリンクの例を次に示します。

<a href="http://jsfiddle.net" onclick="document.getElementById('siframe').src=this.href; return false;">click me</a>

これにより、リンクがクリックされたときに iframe ソースが置き換えられます。

フィドルを更新しました。

より柔軟にするために、すべてのアンカーが同じように動作するようなコードを作成できます。

window.onload = function() {
    var oFrame = document.getElementById('siframe');
    var anchors = document.getElementsByTagName("a");
    for (var i = 0; i < anchors.length; i++) {
        var anchor = anchors[i];
        var curHref = anchor.href;
        if (curHref && curHref.length > 0) {
            anchor.onclick = function() {
                oFrame.src = curHref;
                return false;
            }
        }
    }
};