Javascript 在父级中更改输入时，将val发送到iframe并更新_Javascript_Jquery_Html_Iframe

Javascript 在父级中更改输入时，将val发送到iframe并更新

javascript jquery html iframe

Javascript 在父级中更改输入时，将val发送到iframe并更新,javascript,jquery,html,iframe,Javascript,Jquery,Html,Iframe,我需要在输入[text]更改时（或在其他事件中）更新iframe的内容例如：我正在输入家长的输入“Hello World！！！”，而iframe的Hi正在更改为你好，世界逐个符号如果解决方案在jQuery上会更好，但香草js也可以）多谢各位另外，很抱歉我的英语不好（您可以将父页面上的值作为参数传递给iframe 比如说下面的例子父HTML <input type="text" id="parenteElem"> <iframe id="frameOn

我需要在输入[text]更改时（或在其他事件中）更新iframe的内容

例如：我正在输入家长的输入“Hello World！！！”，而iframe的

Hi

正在更改为

你好，世界逐个符号
如果解决方案在jQuery上会更好，但香草js也可以）
多谢各位
另外，很抱歉我的英语不好（
您可以将父页面上的值作为参数传递给iframe
比如说下面的例子
父HTML
    <input type="text" id="parenteElem">
    <iframe id="frameOnParent">



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


$（“#parentElem”）。关于（“更改”，函数（事件）{
$（'#frameOnParent'）.attr（'src'，“test.html？param1=“+$（this.val（））；
})

Iframe HTML：
    <h1>Hi</h1>

Hi

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

         var heading = getHeader();
         $("h1").html(heading);
    </script>


函数getHeader（）{
var headerText=window.location.search.substring（“param1”）；
返回标题文本；
}
var heading=getHeader（）；
$（“h1”）.html（标题）；
更好的方法是使用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>


一页。。
正文{字体大小：16px；字体系列：Arial，Helvetica，无衬线；}
iframe{宽度：300px；高度：200px；边框：1px实心#4593c6；}
父输入：
发送帧

const inText=document.querySelector（“#在Txt中”）
，btSend=document.querySelector（“#Bt-Send2iFrame”）
，inFramW=document.querySelector（“#在框架中”）.contentWindow
btSend.onclick=\=>{
let info={inTxt:inText.value}
inFramW.postMessage（JSON.stringify（info），“*”）
}

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> 


iframe

const infoParent=document.querySelector（“#info Parent”）
window.onmessage=e=>
{
让message=JSON.parse（e.data）
infoParent.textContent=message.inTxt
}
您必须具有CORS访问权限，然后var otherDocument=iframelement.contentWindow.document
。预期的输出是什么？@StackSlave iframes页面和父服务器在同一台服务器上，据我所知，我在这台服务器中不需要CORScase@Rojo正如我在用户在input[type=text]中键入文本时所说的那样新值转到iframe并逐个符号更改iframe符号中的$（“h1”）.text（）。标题将是未定义的，虽然不理想，但我可以使用它，但getHeader（）；
必须是函数getHeader（）{var headerText=window.location.search.substring（“param1”）；返回headerText；}