javascript - 如何在外部网站顶部显示 webapp 的标题栏？

Question

假设 webapp 有外部 URL 列表。用户单击其中一个 URL 并转到另一个网站。如何在其他网站顶部显示第一个 webapp 的标题？

http://www.stumbleupon.com/

这些人为此目的使用 iframe，但是如果我尝试从 Pinterest 添加一个页面，例如，那么我将只得到 Stumbleupon 的标题和空白正文，因为 x-frame-options pinterest 的设置为 sameorigin。

Answer 1

据我所知，如果不使用 iframe，就无法将您自己的应用程序的标题放在其他网站的内容之上，而且如果没有扩展程序，就无法绕过同源规则。

如果您创建一个 Chrome 扩展程序，您应该能够让它请求跨源权限，然后您的代码应该被允许嵌入以前无法嵌入的 iframe。

来自Chrome docs :

By adding hosts or host match patterns (or both) to the permissions section of the manifest file, the extension can request access to remote servers outside of its origin.

{       
   "name": "My extension",
   ...
   "permissions": [
     "http://www.google.com/"
   ],
   ...
 }

因此，您应该只需添加模式 * 即可为您的 Chrome 扩展程序请求所有网站的 CORS 权限。 permissions 部分是为 AJAX 请求设计的，所以我不能 100% 确定这种方法适用于 iframe，但我会试一试。

根据我的粗略研究，您可能无法通过 Firefox 扩展程序请求跨源权限，不幸的是，因此只能使用 Chrome。