브라우저 플러그인을 통해 iframe에서 구성 할 값을 설정하십시오.

저희 회사에서는 db에 저장된 양식의 값을 제 3 자 회사의 양식 (일일 작업의 일부)으로 매핑하고 싶습니다.브라우저 플러그인을 통해 iframe에서 구성 할 값을 설정하십시오.

양식은 site1.com에 있으며 제 3 자 회사의 양식은 site2.com에 있으며 site1.com의 iframe에 표시됩니다.

나는

은 물론 jQuery로 매핑 때문에 동일 출처 정책의 작동하지 않습니다 site2.com 완벽하게 site1.com 제어 및 없음이 있습니다.

"요소 검사"를 사용하여 DOM 트리를 수동으로 조작 할 수 있으므로 브라우저 플러그인이 작동 할 수 있다고 생각했습니다. 그러나 지금까지는 같은 기원 정책을 다시 실행하면서이 문제를 해결할 수 없었습니다.

이 기능을 작동시키는 다른 방법이 있습니까? 한 단계 더 나아가서 Mac 용 코코아 응용 프로그램을 만들어야합니까?

출처

2015-01-19 apfz

by "폼에서 값을 맵핑하여 nother form "? 첫 번째 양식을 수동으로 채우고 두 번째 양식에 값을 복사 하시겠습니까? – abl

정확히, site1.com의 양식은 사용자가 아닌 나를 입력해야합니다. 제출 후 양식을 볼 때이 세부 정보는 site2.com의 다른 양식으로 복사해야합니다. – apfz

사용자 스크립트를 사용하여 목표를 달성 할 수 있습니다. 나는 examone siteone.com을 만들었다 - 입력, 버튼, iframe이있는 페이지 (sitetwo.com을 본다). 버튼을 클릭하면 siteone.com의 입력 값이 sitetwo.com의 입력 값으로 표시됩니다. 사용자 스크립트를 설치하려면 Chrome 및 Safari 용 브라우저 확장 Tampermonkey 또는 Firefox 용 Greasemonkey를 사용할 수 있습니다. 페이지와 iframe 사이의 통신을 위해 Window.postMessage를 사용했습니다. documentation입니다. 자바 스크립트 라이브러리가 필요한 경우 @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);

출처

2015-02-02 14:28:50

예! 그게 다야! 고마워요! 내가해야했던 한 가지 변화는 ** undefined **를 ** "undefined"**로 변경하는 것입니다. jquery를 추가하고자하는 사람들을 위해 : ** // @require http://code.jquery.com/jquery-latest.js**. 내가 잘 모르겠다는 점은 브라우저 확장 기능이 작동하는지 여부입니다. – apfz

) 환영합니다. @require info로 업데이트되었습니다. –

"window.postmessage"및 "window.onmessage"기능을 시도한 적이 있습니까? 그것은 크롬, 파이어 폭스와 IE8 +에서 작동합니다.

출처

2015-02-02 05:57:42 jilykate

site2.com을 제어 할 필요가 없습니까? – apfz

브라우저 플러그인을 통해 iframe에서 구성 할 값을 설정하십시오.

답변

관련 문제