跨域子iframe滚动？

Question

6

能否加载跨域子iframe并将其滚动到特定部分?

举个例子，我想引用Stack Overflow上的一个问题，并使用JavaScript将其滚动到页面中问题所在的特定部分，或者叠加一个高亮显示，或其他什么东西。

我的方法是通过设置巨大的高度来加载iframe，然后通过移动位置来滚动它。

然而这种方式并不好，有更好的方法吗？

- RandallB

1

如果你想克服跨域保护（防止你读取或写入内容），最简单的方法是在服务器端获取页面并以这种方式包含它。 - Denys Séguret

@dystroy，这是正确的方法，除非SO政策允许爬取。 - Jashwant

@JeffreySweeney 当然，如果有已知的名称那是可能的。 - Denys Séguret

1

所以，甚至不允许使用 iframe :) - Jashwant

是的，这也是真的...服务器端内联似乎是正确的方法，但在执行之前，我会先检查一下元数据是否允许。 - Denys Séguret

嗯...我想我会做高度这个事情。我不想在未经允许的情况下抓取别人的内容，所以如果我最终这样做了，我会从高的iframe开始，然后通过postmessage为那些同意的人提供API。 - RandallB

2个回答

1

如果 iframe 是从不同的源域加载的，那么你几乎无法与其交互。浏览器执行跨源安全策略，不允许直接操作 iframe 内容。如果你能够控制加载到 iframe 中的内容，可以使用 postMessage 函数。

postMessage API 似乎得到了相当好的支持。你可以查看规范和演示。

这篇博客文章对解决该问题的方法有很好的概述。

你只需设置 iframe 的高度来进行 hack，这是一个有趣的想法，但你必须知道它需要多长才能正常工作，因此只有在你了解要显示的内容时才能使用。

- martineno

2

一些关于SO页面的控制？ - Denys Séguret

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Jordan Morris · Accepted Answer

其中一种方法是在 iframe 上设置负的 top，然后将其高度设置为比所需高度更高。

例如，如果您想要将其滚动到 100px，则设置 top:-100px 并增加 100px 的高度。

然后，您只需要隐藏 iframe 的顶部部分，例如屏幕顶部或其他元素下面（使用 z-index）。

这可能会与 iframe 元素上的 scrolling="no" 结合使用。