обновлять данные из формы в iframe одновременно

Question

У меня есть php файл ** (индекс. php) ** с формой. И у меня есть еще один php файл ** (template1. php) ** с отображением данных, он показывает данные после заполненной формы из индекса. php после отправки. Теперь template1. php должен отображаться в index. php, и если я наберу поле ввода формы index. php, тогда данные поля должны отображаться в template1. php одновременно. Для этого я использую iframe. Но решение не найдено.

index. php is:

<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>

js file is:

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

в js, я получил идентификатор тега iframe, но в index. php и template1. php идентификаторы одинаковы. Поэтому не нужно искать идентификатор из шаблона. php Мне нужно, когда я набираю в поле ** Business Specialty ** в индексе. php, затем в теге с идентификатором business_title в template1. php должно быть изменено. И так же, как загрузка изображения. Я пробовал весь день. Но не получил никакого решения. Пожалуйста, дайте мне решение.

template1. php is:

<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>

Answer 1

То, что вам нужно, это метод window.postMessage().

window.postMessage ()

Метод window.postMessage () безопасно обеспечивает связь между источниками между объектами Window; например, между страницей и всплывающим всплывающим окном, или между страницей и встроенным в нее iframe.

Вы можете прочитать подробнее здесь .

---

Таким образом, вы можете использовать функцию 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);