При изменении ввода в родительском файле отправьте val в iframe с обновлением - PullRequest
Новая
       1

При изменении ввода в родительском файле отправьте val в iframe с обновлением

0 голосов
/ 22 октября 2019

Мне нужно обновить содержимое iframe при изменении ввода [text] (или при каком-либо другом событии).

Например: я набираю данные родительского ввода "Hello World !!!" и iframe <h1>Hi</h1> меняется на <h1>Hello World!!!</h1> символ за символом.

Лучше, если решение будет на jQuery, но ванильный js тоже подойдет))

Большое спасибо.

PS Извините за мой плохой английский (

Ответы [ 2 ]

0 голосов
/ 22 октября 2019

лучше использовать Window.postMessage => https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage

родительская страница: 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>a Page..</title>
  <style>
    body  { font-size: 16px; font-family: Arial, Helvetica, sans-serif; }
    iframe { width: 300px; height: 200px; border: 1px solid #4593c6; }
  </style>
</head> 
<body>
    <p>parent input :
      <input id="in-Txt" type="text" placeholder="type something">
      <button id="Bt-Send2iFrame">Send2iFrame</button>
    </p>

    <iframe id="in-Frame" src="xyz_frame.html" ></iframe>

  <script>
    const inText  = document.querySelector('#in-Txt')
        , btSend  = document.querySelector('#Bt-Send2iFrame')
        , inFramW = document.querySelector('#in-Frame').contentWindow

    btSend.onclick=_=>{
      let info = { inTxt: inText.value }

      inFramW.postMessage( JSON.stringify(info), "*")
    }

  </script>
</body>
</html>

страница iframe 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
</head>
<body>
  <p> the iframe </p>

  <p id="info-Parent">...</p>

  <script>
    const infoParent = document.querySelector('#info-Parent')

    window.onmessage=e=>
      {
      let message = JSON.parse ( e.data )
      infoParent.textContent = message.inTxt
      }
  </script>
</body>
</html>
0 голосов
/ 22 октября 2019

Вы можете передать значение на родительской странице в качестве параметра в iframe.

Скажем, например, следующее

Parent HTML, 

    <input type="text" id="parenteElem">
    <iframe id="frameOnParent">

Parent Script: 

    <script type="text/javascript">
         $("#parentElem").on("change", function(event) {
               $('#frameOnParent').attr('src', "test.html?param1=" + $(this).val()); 
         })
    </script>

Iframe HTML: 

    <h1>Hi</h1>

Сценарий Iframe: 

    <script type="text/javascript">
         function getHeader() { 
            var headerText = window.location.search.substring("param1");
            return headerText;
         }

         var heading = getHeader();
         $("h1").html(heading);
    </script>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...