Google如何在iframe中创建移动友好的固定背景和视差内容？

Question

bounty到期在6天内。这个问题的答案有资格获得+ 200声望赏金。Dimser希望引起更多关注这个问题：“我想了解复制此功能所需的技术和工具。由于iframe及其内容完全独立于父窗口，因此我认为了解用于此功能工作的技术将对其他类型的工作和实现有所帮助。尽管它是简单的解决方案，还是高级的解决方案，但我有兴趣了解它的工作方式以及根据父窗口滚动活动如何使背景保持固定或动画的方式。”

我当前的测试涉及一个将iframe postMessage与当前滚动位置配合使用以便在iframe中转换3d背景图像的路口观察员。但这会产生很多抖动，在生产时可能会造成延迟，我会看到这种方法存在更多问题。据我了解，在Google的Web开发人员工具中，广告正在使用视差以使内容响应滚动位置，但是Google是否依赖于postMessage或如何使内容平滑？固定背景和内容对父窗口中的滚动事件做出响应的体验？

关于固定背景，我知道iOS不支持背景附加：固定，为什么它必须具有某些基于JS的功能。然后我相信由父窗口中的intersectionobserver触发。如果Google广告完全依靠父窗口来提供任何信息，还是所有内容都在iframe中进行管理-我不知道。但是我想听听是否有人知道这些技术及其背后的工作，因为它看起来很简单，但对于像我这样的凡人来说却是无法实现的。

Answer 1

[一个有趣的问题！我想从您的最后一个gif开头。

Gif＃3

关于固定背景，我知道iOS不支持background-attachment: fixed，为什么它必须具有某些基于JS的功能。

即使IOS支持background-attachment: fixed，这也不起作用，因为此属性仅用于背景图像。它也不是JS（至少不是必须的），因为您可以使用CSS来做到这一点：

* {
  margin: 0;
  padding: 0;
}

.section {
  width: 100%;
  height: 1000px;
  background: red;
}

.spacer {
  width: 100%;
  height: 200px;
  background: transparent;
}

.background-scroller {
  background: lightgrey;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  z-index: -1;
  display: flex;
  align-items: center;
  justify-content: center;
}

<div class="section"></div>
<div class="spacer"></div>
<div class="section"></div>
<div class="background-scroller">
  This could be anything
</div>

[我知道，在某些网站上，这些广告会针对每个“空格”进行更改，但CSS只能通过使用position: sticky来实现。

* {
  margin: 0;
  padding: 0;
}

.section {
  width: 100%;
  height: 1000px;
  background: red;
}

.spacer {
  width: 100%;
  height: 200px;
  background: transparent;
}

.background-scroller {
  background: lightgrey;
  width: 100%;
  height: 100vH;
  position: sticky;
  top: 0;
  z-index: -1;
  display: flex;
  align-items: center;
  justify-content: center;
  float: left;
}

.section-wrapper {
  position: relative;
}

<div class="section-wrapper">
  <div class="background-scroller">
    This is one thing
  </div>
  <div class="section"></div>
  <div class="spacer"></div>

  <div class="background-scroller">
    And this is something completely else
  </div>

  <div class="section"></div>
  <div class="spacer"></div>

  <div class="section"></div>
</div>

每个站点的处理方式都不同，其中许多人使用交叉观察器API，但我的观点是，有时一些简单的CSS可以完成这项工作。因此不一定是JS！这些是执行此操作的合法方法。

---

Gif＃2，Gif＃1

这些效果稍微复杂一些。

原产地限制是一个很大（但必不可少的）。您的父框架对iframe的访问非常受限，反之亦然。这样我们只剩下几个可以使用的properties。

如果检查iframe元素，您可能已经注意到，它们使用data-is-safeframe属性。我复制了这样一个元素，并删除了每个不重要的属性。

<iframe src="" data-is-safeframe="true" sandbox="allow-forms allow-pointer-lock allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts allow-top-navigation-by-user-activation"></iframe>

什么是SafeFrame？好吧，SafeFrame API由IAB（互动广告局）开发，基本上允许广告商与广告提供商之间进行交流。如果您不是Google开发者，则可能无法确切知道他们使用此API的目的。

只有一种现代方法可以与跨域iframes通信：postMessage()。是的，他们也使用SafeFrame，但是我认为这并不意味着像这样的事情。 （对于Google而言）也没有办法违反此规则。可以肯定的是，我进行了一些测试（如果考虑的话，这实际上是不必要的），并且我所有的测试都失败了。

---

但是这会产生很多抖动

[这让我感到惊讶，因为postMessage不应那么慢。我用JSFiddle做了一个小例子，因为SO用我的iframe做了一些奇怪的事情。

• 这里是将在iframe中显示的页面：Click或Code
• 这里是将显示iframe并发送postMessage()的页面（向下滚动页面（不是iframe）：Click或Code。

[如果您查看控制台，您会注意到postMessage绝对足够快，足以处理scroll之类的快速触发事件。您也可能因为“ disco iframe”而注意到它。

老实说，我认为是您的网站出了问题。

---

结论

我不知道Google如何做到这一点。但是，我只能想到一种可能的方法：postMessage-您已经选择的一种方法。这意味着，如果没有其他方法，那么这一定是Google使用的方法。

您的性能问题一定是您的错。

---

所以这只是我的意见。可能有我没想到的技术和方式。我发现这个问题非常有趣，如果解决方案不正确，我想知道正确的答案！所以随时纠正我。