强制 iframe 中的元素显示在页面的其余部分
Forcing elements in iframe to display over rest of page
我按照 @RobW's answer to this question.
创建了内容脚本 Chrome 扩展工具栏
我现在正在尝试让某些元素覆盖在页面的其余部分上，但目前它们只显示在 iframe 中。
例如，单击一个图标并显示一条通知panel/tooltip。可以看到，它被iframe的边缘截断了：
有没有办法将面板的 CSS 更改为悬停在页面其余部分的顶部，尽管它位于单独的 iframe 中？
顺便说一句，我将工具栏的高度设置为 143px，而不是您可能期望的 43px，这样问题会更加明显。
不，我相当确定您不能使用基于 iframe 的方法来做到这一点。这超出了 iframe 内容隔离的目的 - 想象一下 clickjacking 的可能性！
您需要将 UI 插入文档本身。
例如，您可能会选择基于 iframe 的方法，因为这可能会与页面自身 CSS 发生冲突。值得庆幸的是，有一个现代工具可以帮助解决这个问题 - Shadow DOM.
我按照 @RobW's answer to this question.
创建了内容脚本 Chrome 扩展工具栏我现在正在尝试让某些元素覆盖在页面的其余部分上，但目前它们只显示在 iframe 中。
例如，单击一个图标并显示一条通知panel/tooltip。可以看到，它被iframe的边缘截断了：
有没有办法将面板的 CSS 更改为悬停在页面其余部分的顶部，尽管它位于单独的 iframe 中？
顺便说一句，我将工具栏的高度设置为 143px，而不是您可能期望的 43px，这样问题会更加明显。
不，我相当确定您不能使用基于 iframe 的方法来做到这一点。这超出了 iframe 内容隔离的目的 - 想象一下 clickjacking 的可能性！
您需要将 UI 插入文档本身。
例如，您可能会选择基于 iframe 的方法，因为这可能会与页面自身 CSS 发生冲突。值得庆幸的是，有一个现代工具可以帮助解决这个问题 - Shadow DOM.