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

我有一个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" height="200" width="300" 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>

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

<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" alt="Logo" width="100%" height="auto" />
  </div>
<div class="col-md-12 col-sm-12 col-xs-12 businessheadlineblack pdt10">
 <h3 id="business_title">data from index.php</h3>
</div>

在js中，我得到了iframe标记的id，但在index.php和template1.php中，id是相同的。因此，无需从template.php中查找id 我需要，当我在index.php中键入**业务专业字段**时，template1.php中idBusiness\u title的标记应该被更改。和图片上传一样。 我昨天试了一整天。但没有得到任何解决方案。请给我一个解决方案

template1.php是：

<iframe src="templates/alltemplates/template1.php" height="200" width="300" 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>

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

<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" alt="Logo" width="100%" height="auto" />
  </div>
<div class="col-md-12 col-sm-12 col-xs-12 businessheadlineblack pdt10">
 <h3 id="business_title">data from index.php</h3>
</div>

来自index.php的数据

---

您需要的是

window.postMessage（）

方法

window.postMessage（）

window.postMessage（）方法安全地启用窗口对象之间的跨源通信；e、 例如，在页面和它产生的弹出窗口之间，或者在页面和嵌入其中的iframe之间

你可以读更多

---

因此，基本上，您可以在输入元素上使用

onkeyup（）

函数来捕获关键事件。在

onkeyup（）

中，调用消息传递函数并将输入元素的当前值传递给它

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

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

函数发送消息（值）{
//获取iframe的内容窗口
var contentWindow=document.getElementById（'iframeID'）.contentWindow；
contentWindow.postMessage（值，“http://www.example.com“”；//这是我的本地主机..因此localhost的路径…意味着如果一个嵌入到另一个中，则两者位于同一URL上。您可以键入在浏览器中地址栏中看到的URL，而不是URL。在sendMessage（）->中，网站URL是localhost/arknotech/files/template1.phpDo a console.log（event.origin）；在receiveMessage函数内部，if（event.origin…）之上，并使用它提供给您的window.addEventListener（'message'，function（）{document.getElementById（“business_title”）.innerHTML=event.data；}）；