Javascript 外部iframe内输入字段的设置值

我知道这个问题已经被问了很多次了，但每个人都问它是为了满足自己的需要，所以找不到对我有帮助的答案

我有两个网站，都可以访问，可以添加任何我需要在这两个网站

我的第一个网站

在这个网站上

我有特定值的文本字段 我有一个iFrame，其内容来源于我的其他网站

<input type='text' name='test1' value='5'>
<iframe name='myframe' src='http://www.mysite2.com/index.php'></iframe>

在这一页上

我已经输入了文本字段

我努力实现的目标是：

---

将特定值从我的第一个站点获取到我的第二个站点的输入字段

由于操纵具有不同原点的帧将导致发生跨原点错误，因此必须使用

窗口.postMessage（）

方法将消息发送到子站点，并在其中，听

window.onmessage

并处理消息

下面是一个示例，假设您有这样一个DOM结构：

var frame = document.getElementById('site2-frame');

frame.contentWindow.postMessage('Something something something', '*');

• 网站1（www.mysite1.com）：
  在您的站点#2中，即框架内的站点，您将收听消息并设置数据：

  var input = document.getElementById('input-field');
  
  window.addEventListener('message', function(e) {
      // Check the origin, accept messages only if they are from YOUR site!
      if (/^http\:\/\/www\.mysite1\.com/.test(e.origin)) {
          input.value = e.data; 
          // This will be 'Something something something'
      }
  });
  

  这是对的。在现代网络中，开发是一条必由之路。在iframe中选择元素并更改其值将非常类似于导致跨源安全错误——这是有充分理由的
  下面是一个示例，您如何使用postMessage事件模式实现跨站点/iframe交换值：

  <script>
  window.onload = function(){
  
      // Define the target
      var win = document.getElementById('iframe').contentWindow;
  
      // Define the event trigger
      document.getElementById('form').onsubmit = function(e){
  
          // Define source value or message
          win.postMessage(document.getElementById('source').value);  
          e.preventDefault();
      };
  };
  </script>
  
  <form id='form'>
      <input id="source" type='text' value='5'>
      <input type='submit'/>
  </form>
  
  
  <iframe name='myframe' src='http://www.mysite2.com/index.php'>
  
      <!-- This is what happens inside the iframe -->
      <form id='form'>
          <input id='target' type='text' value=''>
      </form>
  
      <script>
  
          // Wait for the message
          document.addEventListener('message', function(e){
  
              // When you receive the message, add it to the target
              document.getElementById('target').textContent = e.data;
          }, false);
      </script>
  
  </iframe>
  

  
  window.onload=函数（）{
  //确定目标
  var win=document.getElementById（'iframe'）.contentWindow；
  //定义事件触发器
  document.getElementById（'form'）.onsubmit=function（e）{
  //定义源值或消息
  win.postMessage（document.getElementById（'source'）.value）；
  e、 预防默认值（）；
  };
  };
  //等待消息
  document.addEventListener（“消息”，函数（e）{
  //收到消息后，将其添加到目标
  document.getElementById（'target'）.textContent=e.data；
  }，假）；
  

  您始终可以使用iframe url查询字符串名称-值对发送变量，然后在页面加载时根据需要填充变量或输入字段。
  如果两个站点位于不同的域，您必须使用。您是否尝试使用从站点2提取的数据在站点1上设置输入字段？尝试使用从站点1提取的数据在站点2上设置输入字段我认为Window.postMessage是一种方式，但尝试了您的方式。当我按submit时，它不起作用除了/？获取添加到我的网站url

  var input = document.getElementById('input-field');
  
  window.addEventListener('message', function(e) {
      // Check the origin, accept messages only if they are from YOUR site!
      if (/^http\:\/\/www\.mysite1\.com/.test(e.origin)) {
          input.value = e.data; 
          // This will be 'Something something something'
      }
  });
  

  <script>
  window.onload = function(){
  
      // Define the target
      var win = document.getElementById('iframe').contentWindow;
  
      // Define the event trigger
      document.getElementById('form').onsubmit = function(e){
  
          // Define source value or message
          win.postMessage(document.getElementById('source').value);  
          e.preventDefault();
      };
  };
  </script>
  
  <form id='form'>
      <input id="source" type='text' value='5'>
      <input type='submit'/>
  </form>
  
  
  <iframe name='myframe' src='http://www.mysite2.com/index.php'>
  
      <!-- This is what happens inside the iframe -->
      <form id='form'>
          <input id='target' type='text' value=''>
      </form>
  
      <script>
  
          // Wait for the message
          document.addEventListener('message', function(e){
  
              // When you receive the message, add it to the target
              document.getElementById('target').textContent = e.data;
          }, false);
      </script>
  
  </iframe>