从iframe内滚动父文档

Scrolling a parent document from within an iframe

本文关键字：文档 滚动 iframe      更新时间：2023-09-26

我有两个这样的文档:

http://mydomain/nsobd.html 

<html>
    <body>
        <p name="parentElem" id="parentElem">No sign of Big Dave</p>
        <iframe src="http://subdomain.mydomain/nsobd2.html"></iframe>
    </body>
</html>

http://subdomain.mydomain/nsobd2.html 

<html>
    <body>
        <a href="???" id="childLink">No sign of Big Dave</a>
    </body>
</html>

我想要的是，当有人点击iframe中的childLink时，parentElem滚动到视图中。

I have try:

  1. 使用<a href="#parentElem" target="_parent"> -这加载http://subdomain.mydomain/nsobd2.html#parentElem在父帧
  2. 使用<a href="javascript:document.findElementById('parentElem').scrollIntoView()"> -这不起作用，因为两个文档在不同的子域。

还有其他想法吗?

由于您试图在两个域之间进行通信，简短的答案是您不能。由于浏览器级别的限制，您无法禁止跨站点脚本。

例如，假设我注册了域名superwinningcontest.com并向人们的电子邮件发送链接。当他们加载主页时，我可以在里面隐藏一些iframe，阅读他们的Facebook动态，查看最近的亚马逊或PayPal交易，或者——如果他们使用的服务没有实现足够的安全性——从他们的账户中转移资金。这就是为什么JavaScript仅限于同域和同协议。[源]

但是，您可以通过跨文档消息传递实现您的目标。github项目窗口可能会帮助你。因此，不是从iframe调用或执行父窗口中的某些函数，而是从iframe向父窗口发送一条消息"嘿，介意滚动到X吗?"当父帧接收到此消息时，它可以决定执行一些函数，这些函数可能会滚动到位置x。

在这个StackOverflow线程中似乎有许多相关的答案。例如，在这个答案中，用户实现了一个跨文档消息传递方案，它可能适合您。
相关文章：