0

この質問はよく聞かれますが、答えは通常似ています。

基本的には、iframe のコンテンツがクリックされたときに実行する関数が必要です。

このデモンストレーションのために、「iframeID」の ID と http://mydomain.com のソースを持つ iframe を含むhttp://mydomain.com/iframe.htmlがあります。

このコードは機能します：

jQuery(document).ready(function(){
    $('#iframeID').contents().click(function(event) {
        console.log('Clicked! ' + event.pageX + ' - ' + event.pageY);
    });
});

ただし、このコードは Internet Explorer でのみ機能します。すべてのブラウザで動作するソリューションが必要です。

幸いなことに、これはすべて同じドメイン上にあるため、iframe ソースまたは iframe.html に追加のコードを配置する必要がある場合は問題ありません。クロスブラウザで動作するために必要なだけです。

もう 1 つ注目すべき点は、これがサブドメイン全体で機能することを望んでいることです。

異なるドメインでは機能しないことはわかっていますが、私が理解しているように、サブドメインは問題ないはずですか? それが機能するために必要な追加の手順はありますか?

どんな助けもありがたく受け取った！

4

2 に答える 2

1

iframe内ではなく、上部ウィンドウでiframe内のリンクを開くだけの場合は、iframeからのリンクを親ウィンドウで強制的に開く方法を確認してください。

これをiframeHTMLの先頭に配置するだけです。

<base target="_parent" />
于 2012-09-18T20:34:22.910 に答える
1

XDM を使用する 1 つの方法を示す jsFiddle にまとめた例を次に示します。 これはデモであり、このフィドルを子 iframeとして含みます。

HTML (親):

<h1>Parent window</h1>
<input id="message-for-child" type="text" value="" placeholder="(message for child)">
<button id="parent-to-child-button">Send to child</button>
<br>
<p id="parent-message"></p>
<br>
<iframe id="child" src="http://fiddle.jshell.net/quant/G2uq6/show/"></iframe>

JavaScript (親):

// parent_on_message(e) will handle the reception of postMessages (a.k.a. cross-document messaging or XDM).
function parent_on_message(e) {
    console.log("parent_on_message event fired: ", e);
    // You really should check origin for security reasons
    // https://developer.mozilla.org/en-US/docs/DOM/window.postMessage#Security_concerns
    if (e.origin.search(/^http[s]?:\/\/.*\.jshell\.net/) != -1
        && !($.browser.msie && $.browser.version <= 7)) {
        var returned_pair = e.data.split('=');
        if (returned_pair.length != 2)
            return;
        if (returned_pair[0] === 'message-for-parent') {
            $("p#parent-message").html(returned_pair[1]);
        }
        else
            console.log("Parent received invalid message");
    }
}

jQuery(document).ready(function($) {
    // Setup XDM listener (except for IE < 8)
    if (!($.browser.msie && $.browser.version <= 7)) {
        // Connect the parent_on_message(e) handler function to the receive postMessage event
        if (window.addEventListener)
            window.addEventListener("message", parent_on_message, false);
        else
            window.attachEvent("onmessage", parent_on_message);
    }


    $("button#parent-to-child-button").on("click", function(e) {
        console.log("Sending: " + $("input#message-for-child").attr("value"));
        $("iframe#child").get(0).contentWindow.postMessage('message-for-child=' + $("input#message-for-child").attr("value"), '*');
        
    });

        
});

HTML (子):

<h1>Child</h1>
<input id="message-for-parent" type="text" value="" placeholder="(message for parent)">
<button id="child-to-parent-button">Send to parent</button>
<br>
<p id="child-message"></p>

JavaScript (子):

// child_on_message(e) will handle the reception of postMessages (a.k.a. cross-document messaging or XDM).
function child_on_message(e) {
    console.log("child_on_message event fired: ", e);
    // You really should check origin for security reasons
    // https://developer.mozilla.org/en-US/docs/DOM/window.postMessage#Security_concerns
    if (e.origin.search(/^http[s]?:\/\/.*\.jshell\.net/) != -1
        && !($.browser.msie && $.browser.version <= 7)) {
        var returned_pair = e.data.split('=');
        if (returned_pair.length != 2)
            return;
        if (returned_pair[0] === 'message-for-child') {
            $("p#child-message").html(returned_pair[1]);
        }
        else
            console.log("Child received invalid message");
    }
}

jQuery(document).ready(function($) {
    // Setup XDM listener (except for IE < 8)
    if (!($.browser.msie && $.browser.version <= 7)) {
        // Connect the child_on_message (e) handler function to the receive postMessage event
        if (window.addEventListener)
            window.addEventListener("message", child_on_message , false);
        else
            window.attachEvent("onmessage", child_on_message );
    }


    $("button#child-to-parent-button").on("click", function(e) {
        console.log("Sending: " + $("input#message-for-parent").attr("value"));
        parent.window.postMessage('message-for-parent=' + $("input#message-for-parent").attr("value"), '*');
        
    });

        
});

参考文献：

于 2012-09-18T14:38:54.500 に答える