通过浏览器插件设置值以在 iframe 中形成

Question

对于我的公司，我想将值从存储在数据库中的表单映射到第三方公司的表单（我们日常工作的一部分）。

我们的表单在site1.com，第三方公司的表单在site2.com，显示在site1.com的iframe中。

我可以完全控制 site1.com，none 可以完全控制 site2.com

显然 jQuery，由于同源策略，映射将不起作用。

我想，因为我可以用 "inspect element" 手动操作 DOM-树，所以浏览器插件可能会起作用。但是直到现在我也无法使它工作，因为我再次运行进入同源策略。

还有其他方法可以让它发挥作用吗？我是否需要更进一步，为我的 Mac 创建一个 cocoa-app？

Answer 1

你有没有试过"window.postmessage"和"window.onmessage"功能。它适用于 chrome、firefox 和 IE8+。

Answer 2

您可以使用用户脚本来实现您的目标。我制作了一个示例 siteone.com - 一个包含输入、按钮、iframe 的页面（查看 sitetwo.com）。在按钮上单击来自 siteone.com 的输入值显示在来自 sitetwo.com 的输入中。要安装用户脚本，您可以使用 Chrome 和 Safari 的浏览器扩展 Tampermonkey，或 Firefox 的 Greasemonkey。对于页面和 iframe 之间的通信，我使用 Window.postMessage look documentation. If you need javascript libraries, you can use @require meta block link.

siteone.com index.html

<html>
<head>
</head>
<body>
    <input id="parent-input" type="text"/>
    <button id="send-data-to-iframe">Send data to iframe</button>
    <br /><br />
    <iframe id="my-iframe" style="border:1px solid red; height:50px; width:200px;" src="http://sitetwo.com:8080">
    </iframe>
    <script>
        var win = document.getElementById("my-iframe").contentWindow;

        document.getElementById("send-data-to-iframe").onclick = function(){
            win.postMessage(
                document.getElementById("parent-input").value,
                "http://sitetwo.com:8080" // target domain
            );
            return false;
        }
    </script>
</body>

sitetwo.comindex.html

<html>
<head>
</head>
<body>
    <input id="iframe-input" type="text"/>
</body>

myUserJS.user.js

// ==UserScript==
// @name myUserJS
// @license MIT
// @version 1.0
// @include http://sitetwo.com*
// ==/UserScript==
(function (window, undefined) {
    var w;
    if (typeof unsafeWindow != undefined) {
        w = unsafeWindow
    } else {
        w = window;
    }
    // extended check, sometimes @include section is ignored
    if (/http:\/\/sitetwo.com/.test(w.location.href)) {
        function listener(event){
            document.getElementById("iframe-input").value = event.origin + " send: " + event.data;
        }
        if (w.addEventListener){
            w.addEventListener("message", listener,false);
        } else {
            w.attachEvent("onmessage", listener);
        }
    }
})(window);

通过浏览器插件设置值以在 iframe 中形成

Set values to form in iframe through browser plugin

jquery

forms

iframe

same-origin-policy

browser-plugin