How can two instances of a userscript communicate

Refer to the technique of having the same JavaScript to run in both a web page and an iframe, as described in this answer:

For example, suppose you have this page at domain_A.com:

<html>
<body>
    <iframe src="http://domain_B.com/SomePage.htm"></iframe>
</body>
</html>

If you set your @match directives like this:

// @match http://domain_A.com/*
// @match http://domain_B.com/*

Then your script will run twice -- once on the main page and once on the iframe as though it were a standalone page.

What are the options to have the two instances of the script to communicate with each other?

This would be needed to sync the instances. For example, have the iframe script-instance execute its task only after the webpage script-instance completed, and vice versa.

标签： javascript iframe synchronization cross-domain userscripts

1条回答

一夜七次

2楼-- · 2019-01-14 10:46

The two script instances can communicate with each other using postMessage(). Regarding:

This would be needed to sync the instances, so for example to have the iframe one to execute its task only after the webpage one completed, and vice versa.

That's exactly what is shown in this, stunningly brilliant, answer. ;)
But Chrome has bugs in how it presents frames/iframes to extensions (And Chrome userscripts are extensions with an auto-generated manifest).
So, to work around these bugs, you must inject the code that calls postMessage().

The following script shows how. It:

Runs in both an iframe and the containing page.
Handles cross domain iframes.
It demonstrates inter-script control having the following logic:
1. The container page sets up to listen for messages from the iframe.
2. The iframe sets up to listen for messages from the container page.
3. The iframe sends the first message to the container page.
4. When the container page receives that message, it sends another message back to the iframe.

Install this script:

// ==UserScript==
// @name        _Cross iframe, cross-domain, interscript communication
// @include     http://fiddle.jshell.net/9aQv5/*
// @include     http://www.puppylinux.com/
// ==/UserScript==

console.log ("Script start...");

if (window.top === window.self) {
    console.log ("Userscript is in the MAIN page.");

    //--- Setup to process messages from the GM instance running on the iFrame:
    window.addEventListener ("message", receiveMessageFromFrame, false);
    console.log ("Waiting for Message 1, from iframe...");
}
else {
    console.log ("Userscript is in the FRAMED page.");

    //--- Double-check that this iframe is on the expected domain:
    if (/puppylinux\.com/i.test (location.host) ) {
        window.addEventListener ("message", receiveMessageFromContainer, false);

        //--- Send the first message to the containing page.
        sendMessageFromAnIframe (
            "***Message 1, from iframe***", "http://fiddle.jshell.net"
        );
        console.log ("Waiting for Message 2, from containing page...");
    }
}

function receiveMessageFromFrame (event) {
    if (event.origin != "http://www.puppylinux.com")    return;

    console.log ('The container page received the message, "' + event.data + '".');

    //--- Send message 2, back to the iframe.
    sendMessageToAnIframe (
        "#testIframe",
        "***Message 2, from the container page***",
        "http://www.puppylinux.com"
    );
}

function receiveMessageFromContainer (event) {
    if (event.origin != "http://fiddle.jshell.net")    return;

    console.log ('The iframe received the message, "' + event.data + '".');
}

/*--- Because of bugs in how Chrome presents frames to extensions, we must inject
    the messaging code. See bug 20773 and others.
    frames, top, self.parent, contentWindow, etc. are all improperly undefined
    when we need them.  See Firefox and other browsers for the correct behavior.
*/
function sendMessageFromAnIframe (message, targetDomain) {
    var scriptNode          = document.createElement ('script');
    scriptNode.textContent  = 'top.postMessage ("' + message
                            + '", "' + targetDomain + '");'
                            ;
    document.body.appendChild (scriptNode);
}

function sendMessageToAnIframe (cssSelector, message, targetDomain) {
    function findIframeAndMessageIt (cssSelector, message, targetDomain) {
        var targetIframe    = document.querySelector (cssSelector)
        if (targetIframe) {
            targetIframe.contentWindow.postMessage (message, targetDomain);
        }
    }
    var scriptNode          = document.createElement ('script');
    scriptNode.textContent  = findIframeAndMessageIt.toString ()
                            + 'findIframeAndMessageIt ("' + cssSelector
                            + '", "' + message
                            + '", "' + targetDomain + '");'
                            ;
    document.body.appendChild (scriptNode);
}

console.log ("Script end");

Then visit this test page at jsFiddle.

You will see this in the javascript console:

Script start...
Userscript is in the MAIN page.
Waiting for Message 1, from iframe...
Script end
Script start...
Userscript is in the FRAMED page.
Waiting for Message 2, from containing page...
Script end
The container page received the message, "***Message 1, from iframe***".
The iframe received the message, "***Message 2, from the container page***".

0人赞添加讨论(0) 举报

How can two instances of a userscript communicate

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间