同时从 iframe 中的表单更新数据

Posted 2023-05-09

【中文标题】同时从 iframe 中的表单更新数据

【英文标题】：update data from form in iframe simultaneously

【发布时间】：2020-07-20 10:40:51

【问题描述】：

我有一个带有表单的 php 文件**(index.php)**。我还有另一个带有显示数据的php文件**（template1.php）**，它在提交后从index.php填写表格后显示数据。 现在，template1.php 应该显示在 index.php 中，如果我输入 index.php 表单的输入字段，那么字段数据应该同时显示在 template1.php 中。 为此，我使用 iframe。但没有找到解决方案。

index.php 是：

<iframe src="templates/alltemplates/template1.php"   id="myframe"></iframe> 

<form id="submit_form" action="#" method="post" enctype="multipart/form-data">
  <div class="row"> 
   <div class="col-md-6 mb-50">
    <span class="input">
     <label class="" for="cf-email" style="font-weight: 500;">Upload Logo </label>
      <input class="input__field cf-validate" type="file" id="logo" name="logo" accept="image/png,image/jpeg" />
    </span>
  </div>

 <div class="col-md-6 mb-50">
  <span class="input">
   <label class="" for="cf-email" style="font-weight: 500;">Business Speciality </label>
    <input class="input__field cf-validate" type="text" id="business_title" name="business_title" maxlength="40" oninput="iframetype('business_title', business_title.value)" />
  </span>                                                
 </div>

js 文件为：

function iframetype(id, value) 
 
 var iframe = document.getElementById("myframe");
 var elmnt = iframe.contentWindow.document.getElementById(id);
 var iframeid = $(elmnt).attr('id');

在 js 中，我得到了 iframe 标签的 id，但在 index.php 和 template1.php 中，id 是相同的。所以不需要从 template.php 中找到 id 我需要，当我在 index.php 中输入 ** Business Specialty field** 时，应该更改 template1.php 中 ID business_title 的标签。和图片上传一样。 我整天都在尝试酵母。但没有得到任何解决方案。请给我解决方案。

template1.php 是：

<div class="col-md-12 col-md-12 col-xs-12 backgroundf0f0f0 center170">
 <div class="row">
  <div class="logo col-md-8 col-sm-6 col-xs-12 offset-sm-3 offset-md-2">
    <img src="../../uploads/logo/file.jpg from index.php"    />
  </div>
<div class="col-md-12 col-sm-12 col-xs-12 businessheadlineblack pdt10">
 <h3 id="business_title">data from index.php</h3>
</div>

【参考方案1】：

您要寻找的是window.postMessage() 方法。

window.postMessage()

window.postMessage() 方法可以安全地启用 Window 对象之间的跨域通信；例如，在页面和它生成的弹出窗口之间，或者在页面和嵌入其中的 iframe 之间。

您可以阅读更多here。

---

所以基本上，您可以在输入元素上使用onkeyup() 函数来捕获关键事件。在onkeyup() 中调用消息传递函数并将输入元素的当前值传递给它。

<input class="input__field cf-validate" type="text" id="business_title" name="business_title" maxlength="40" onkeyup="sendMessage(this.value);" />

然后消息传递函数会将值发送到 iframe（下面的脚本是主页的一部分）

function sendMessage(value) 
    // get the iframe's content window
    var contentWindow = document.getElementById('iframeID').contentWindow;
    contentWindow.postMessage(value, "http://www.example.com");  // <-- your website URL

在接收端，iframe 将简单地用接收到的值更新目标输入值（下面的脚本在 iframe 内）：

function receiveMessage(event)

    // Do we trust the sender of this message?
    if (event.origin !== "http://example.com:8080") // <-- your URL
    return;

    document.getElementById("business_title").innerhtml= event.data;


window.addEventListener("message", receiveMessage, false);

【讨论】：

它是我的本地主机..所以本地主机的路径...表示localhost/arknewtech/files/template1.php

如果一个嵌入到另一个中，那么两者都在同一个 URL 上。在浏览器的地址栏中输入任何内容，而不是 URL。

在 sendMessage()-> 网站 url 是 localhost/arknewtech/files/template1.php

做一个console.log(event.origin);在你的 receiveMessage 函数内部，在 if(event.origin ...) 之上，并使用它给你的东西

window.addEventListener('message',function() document.getElementById("business_title").innerHTML= event.data; );