2015-01-19 1 views
0

Для моей компании я хотел бы сопоставить значения из формы, хранящейся в db, в форме третьей стороны (часть нашей повседневной работы).Задайте значения, которые должны формироваться в iframe через плагин браузера

Наша форма находится на сайте1.com, форма третьей стороны находится на сайте site2.com и отображается в iframe на сайте1.com.

У меня есть полный контроль над site1.com и ни над site2.com

Очевидно, что с JQuery, отображение не будет работать из-за политики единства происхождения.

Я думал, так как я могу манипулировать DOM-деревом вручную с помощью «элемента проверки», может работать плагин браузера. Но до сих пор мне не удалось заставить это работать, поскольку я снова сталкиваюсь с политикой того же происхождения.

Есть ли другой способ заставить это работать? Нужно ли мне сделать это на одном уровне дальше и создать какао-приложение для моего Mac?

+0

Что вы имеете в виду по "значениям карты от формы до более строгая форма "? Вы собираетесь вручную заполнить первую форму, тогда вы хотите, чтобы значения были скопированы во вторую форму? – abl

+0

точно, за исключением того, что форма на сайте1.com заполняется пользователями, а не мной. когда я просматриваю форму после ее отправки, эти данные затем должны быть скопированы в другую форму на сайте2.com. – apfz

ответ

6

Вы можете использовать пользовательские скрипты для достижения своей цели. Я сделал examone siteone.com - страницу, на которой есть вход, кнопка, iframe (смотрит на sitetwo.com). Нажав на кнопку, введите значение входа с сайта siteone.com в поле ввода с сайта sitetwo.com. Для установки usercript вы можете использовать расширения браузера Tampermonkey для Chrome и Safari или Greasemonkey для Firefox. Для связи между страницей и 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); 
+1

да! это оно! большое спасибо! одно изменение, которое я должен был сделать, изменяется ** неопределенным ** на ** «неопределенный» **. для тех, кто хочет включить jquery add: ** // @require http://code.jquery.com/jquery-latest.js**. что я не уверен в том, будет ли работать расширение браузера. – apfz

+0

приветствуется) обновленный ответ с информацией @require –

0

Вы когда-нибудь пробовали функцию «window.postmessage» и «window.onmessage». Он работает в chrome, firefox и IE8 +.

+0

ли это не требует контроля над site2.com? – apfz

Смежные вопросы