如何在我的网站中嵌入 AMP 页面？答案

【问题标题】：How to embed an AMP page in my website?如何在我的网站中嵌入 AMP 页面？
【发布时间】：2017-05-15 19:11:26
【问题描述】：

我正在开发一个网络应用程序来汇总新闻。我想在移动设备上显示 google 搜索结果的同一窗口中显示启用 amp 的页面。

我还没有找到关于如何在我们的网站上嵌入 amp 页面的单个文档。

我试过这两个链接-

PolyerLab - 由于 CORS 已被 chrome 禁用，因此无法加载页面，因此无法进一步测试，（我想知道它是否忽略了 google.com 的 CORS 限制？）

AMP by Example - 来自 ampproject 官方网站的查看器，git 存储库中缺少“viewer.html”所需的文件 amp-viewer-host.max.js 和 viewer-integr-messaging.js。

stackoverflow 对此也毫无疑问。有没有人已经实施了这样的事情？非常感谢您的帮助！

【问题讨论】：

iframe 怎么样？
并不总是有效，例如它适用于m.economictimes.com/news/defence/…，但不适用于thehindu.com/news/international/…

标签： javascript amp-html

【解决方案1】：

example in the official repository 是开始实施您自己的 AMP 查看器的最佳方式。当您 build the AMP runtime locally 时，您会得到 amp-viewer-host.max.js。它位于：dist/v0/examples/amp-viewer-host.max.js 运行 gulp build 之后。不再需要另一个文件viewer-integr-messaging.js。

【讨论】：

【解决方案2】：

您可以转到具有 amphtml 和 amp 页面 url 的实际站点页面。只需在 iframe 中加载该 url。示例：
网站页面：

 www.example.com/product_page it has <link rel="amphtml" href="www.example.com/product_page_amp-version.html"> in its <head>
to embed use 
<iframe src="www.example.com/product_page_amp-version.html"></iframe>

【讨论】：