通过浏览器插件设置值以在 iframe 中形成
Posted
技术标签:
【中文标题】通过浏览器插件设置值以在 iframe 中形成【英文标题】：Set values to form in iframe through browser plugin 【发布时间】：2015-03-17 06:02:00 【问题描述】：对于我的公司，我想将值从存储在数据库中的表单映射到第三方公司的表单（我们日常工作的一部分）。
我们的表格在site1.com，第三方公司的表格在site2.com，并显示在site1.com 的iframe 中。
我对 site1.com 有完全控制权，但对 site2.com 没有任何控制权
显然，使用 jQuery，由于同源策略，映射将不起作用。
我想，因为我可以使用“检查元素”手动操作 DOM 树，所以浏览器插件可能会起作用。但是直到现在我也无法让它工作，因为我又遇到了同源策略。
还有其他方法可以让它工作吗？我是否需要更进一步并为我的 Mac 创建一个可可应用程序？
【问题讨论】：
“将值从一个表单映射到另一个表单”是什么意思？您是否要手动填写第一个表单，然后将值复制到第二个表单？ 没错，只是site1.com上的表格是用户填写的，不是我填写的。当我在提交后查看表单时，需要将这些详细信息复制到 site2.com 上的另一个表单 【参考方案1】：您可以使用用户脚本来实现您的目标。我做了一个示例 siteone.com - 一个包含输入、按钮、iframe 的页面（查看 sitetwo.com）。在按钮上单击来自 siteone.com 的输入值会显示在来自 sitetwo.com 的输入中。要安装用户脚本，您可以使用 Chrome 和 Safari 的浏览器扩展 Tampermonkey，或 Firefox 的 Greasemonkey。对于页面和 iframe 之间的通信，我使用了 Window.postMessage 看起来 documentation。如果需要 javascript 库，可以使用 @require 元块 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.com index.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);
【讨论】：
是的！而已！多谢！我必须做出的一项更改是将 undefined 更改为 "undefined"。对于那些想要包含 jquery 的人，请添加：// @require code.jquery.com/jquery-latest.js。我不确定浏览器扩展是否也可以工作。【参考方案2】：你有没有试过“window.postmessage”和“window.onmessage”功能。它适用于 chrome、firefox 和 IE8+。
【讨论】：
这不需要控制site2.com吗？以上是关于通过浏览器插件设置值以在 iframe 中形成的主要内容，如果未能解决你的问题，请参考以下文章
Azure 数据工厂 - 查找值以在 ForEach 复制任务中选择语句
状态流程图和 C 动作语言。设置数组值以在单个步骤中输出一个向量
在Iframe中使用jquery ui dialog 怎么使弹出窗口居于浏览器中间