iframe 的范围问题答案

【问题标题】：scope issue with iframeiframe 的范围问题
【发布时间】：2021-11-09 05:06:31
【问题描述】：

我有一个包含一些内联 css 和 javascript 的页面，原始页面上的 javascript 包含一些看起来像这样的点击和滚动逻辑

$('#abc').on('click', function() {
  $('html, body').scrollTop($('#xyz').offset().top)
});

它在原始页面上运行良好；

现在我有一个新页面，它将原始页面作为 iframe 在新页面上导入，但是因为它是 iframe，所以这个 iframe 内原始页面上的 javascript 代码的范围现在绑定到 iframe 本身，并且因为它绑定到 iframe 本身，所以 $('html, body').scrollTop 不再起作用...

我是否可以修改原始页面以使其通过 iframe 工作？

【问题讨论】：

您的意思是运营商页面和 iframe 页面在同一个网站上，您可以根据自己的喜好对其进行编码？
是的，我可以访问新页面，我可以请人更新原始页面
我可能有一些东西，我必须搜索我的档案
kk，谢谢！我很期待！
添加了答案...一些问题？

标签： javascript jquery iframe

【解决方案1】：

出于明显的安全原因，iframe 被隔离在自己的沙箱中。

但是，如果您控制了父页面和 iframe 页面的代码，那么您可以使用消息机制并通过 event.data 部分传递您的信息。

这里的例子只传递文本，对于更广泛的数据，使用 JSON.stringify()/JSON.parse()

文件 z1.html（父级）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Z1</title>
  <style>
#iFrameZ2 { width: 400px; height: 150px; border: 1px solid red; }
#receiveTxt { margin: .5em; border: 1px solid blue; padding: .2em; width: 15em; }
  </style>
</head>
<body>

  <h4>main page (z1.html)</h4>

  <input type="text" id="messageTxt" placeholder="a message...">
  <button id="btSender">send to iframe</button>
  <div id="receiveTxt">.</div>

  <br> <br> iframe:<br>

  <iframe id="iFrameZ2" src="z2.html" frameborder="0"></iframe>

<script>
window.onmessage = e =>
  {
  receiveTxt.textContent = e.data
  /* ----------------------
  if (e.data==='scroll')
    {
    document.querySelector('#xyz').scrollTop
    }
  ------------------ */
  }
btSender.onclick = _ =>
  {
  let info = messageTxt.value.trim()
  if (info!='')
    iFrameZ2.contentWindow.postMessage( info,'*')
  }
</script>
</body>
</html>

文件 z2.html (iframe)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body>
  <h6>z2.html</h6>
  <input id="msgTxt" type="text" placeholder="send a message">
  <button id="btSender">send msg</button>
  <p id="getMsg">...</p>
<script>
btSender.onclick=_=>
  {
  let info = msgTxt.value.trim()
  if (info!='')
    window.parent.postMessage(info,'*')
  }
window.onmessage = e =>
  { 
  getMsg.textContent = e.data 
  }
</script>
</body>
</html>

【讨论】：