首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

我们可以在AMP iframe中添加非AMP HTML吗?

在AMP(加速移动页面)中,是不允许直接在AMP iframe中添加非AMP HTML的。AMP是一种用于快速加载移动页面的开源框架,它有一套严格的规范和限制,旨在提供更快的页面加载速度和更好的用户体验。

AMP要求所有的内容都必须符合其规范,包括HTML、CSS和JavaScript。因此,如果要在AMP页面中使用iframe,必须确保iframe中加载的内容也符合AMP规范,即必须是AMP HTML。

这样设计的目的是为了确保AMP页面的性能和安全性。AMP HTML经过优化,可以更快地加载和渲染,而且AMP页面的内容是在AMP缓存中预先存储的,可以通过Google AMP缓存快速交付给用户。此外,AMP还提供了一些安全机制,以防止恶意代码和不安全的内容加载。

如果您需要在AMP页面中嵌入非AMP HTML内容,可以考虑使用AMP的扩展组件,如amp-iframe。amp-iframe允许您在AMP页面中嵌入非AMP内容,但仍然需要确保嵌入的内容是安全的,并且不会影响AMP页面的性能。

总结起来,AMP要求在iframe中只能加载符合AMP规范的AMP HTML内容,以确保页面性能和安全性。如果需要在AMP页面中嵌入非AMP内容,可以考虑使用AMP的扩展组件amp-iframe,并确保嵌入的内容是安全的。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Google - AMP框架分析及外贸站接入解决方案!

与MIP站点不同的是:AMP站点打开后会明显观察到网页顶部的AMP页面特有导航条: 点击顶部导航条右侧的“链接”标志符号可以显示当前AMP页面对应的源站链接(AMP页面)点击可访问源站: AMP...而如 img 或 video 这样的标签不能直接使用,需要替换成别的标签才能使用,如在 AMP 需要替换成amp-img,mip替换成mip-img。...一套为普通HTML模版、一套为AMP框架模版!当用户访问我们的站点时,页面通过判断用户UA来识别终端。终端为电脑,页面调用原有的普通HTML模版、终端为移动,页面调用AMP框架模版。...答案是不会的,源站和新AMP添加上面介绍的对应关系后,谷歌搜索引擎会自动识别,过几天站长就可以谷歌站长平台看到AMP页面的提示了,当用户搜索相关关键词时,谷歌会优先将AMP域名展现出来(优待展现+闪电标记...IFRAME 换成了amp-iframe。 代码不要写注释。

3.2K70

AMP改造教程,浅谈AMP接入解决方案!

尽管 AMP HTML 网页的大多数标记都是常规 HTML 标记,但部分 HTML 标记替换为了 AMP 专用标记(另请参阅 AMP 规范HTML 标记)。...利用这些自定义元素(称为 AMP HTML 组件)可以轻松高效地实现常见的模式。 例如,amp-img 标记可提供完整的 srcset 支持,即使尚不支持该标记的浏览器也是如此。...2.AMP HTML 规范 01.HTML 标签 禁止添加“”内嵌脚本,除非“type”属性是“application/ld+json”。 可以使用“”。...video替换为:. audio替换为:. iframe替换为:。...03.HTML 属性 AMP HTML不允许以on(例如onclick或onmouseover)开头的属性名称。on允许使用带有文字名称(无后缀)的属性。

4K40

网页加速特技之 AMP

AMP主要由三个部分组成: 1.AMP HTML *1).AMP HTML 规范 AMP HTML HTML 的基础上加了一些使用限制,并且添加AMP自定义的组件。...AMPHTML基础上也提供一些扩展组件,如 、 、等,但是使用扩展组件时必须引入相应的JS文件。...一个简单的 AMP HTML 示例: [1510651875039_5629_1510651945721.jpg] 将上面的代码保存为 .html 文件,浏览器中就可以正常运行,从这个示例可以看出,AMP...要深入了解AMP页面和HTML的差异,还需要更多的测试。 三、AMP如何提升性能? 静态内容页面测试数据AMP页面的加载速度确实更快,那么AMP提升页面加载速度的秘诀是什么捏,我们一起来看看。...但是,AMP 控制资源加载、处理响应式元素避免页面抖动、主动释放资源等策略可以作为我们对移动 Web 优化的参考。

4.6K82

如何屏蔽博客园的Google广告

使用Mathon2打开博客园的任何一篇文章,选定Google广告和周围区域,右键“查看选定区域代码”就可以看到原来是Google的JS文件我的页面中生成了一个Iframe,具体代码为: <SCRIPT...=html&amp;url=http%3A%2F%2Fwww.cnblogs.com%2Fmsdpe%2Farchive%2F2007%2F05%2F10%2F741928.html&amp;color_link...=0 width=468 scrolling=no height=60 allowTransparency> 既然代码看到了,那么解决办法也比较简单,博客园后台管理-选项-配置:...通过CSS定制页面添加一个CSS: iframe { display:none; } 这样就可以把Google的广告屏蔽了。...但是这里有一个问题就是这样做是把所有的Iframe都不显示了,如果页面中有其他的Iframe需要显示怎么办?

66020

【译】利用HTML Slot, HTML Template和Shadow DOM提取出网页摘要

现在我们的目标是文本提取,并不需要自定义组件,但是它可以利用这三种技术。有一个很基础的办法来达到目的,例如我们可以用一些基本的js脚本就可以提取文本,而不需要使用slot和template。...既然我们已经有一些熟悉的方法,那么为什么还要用他们呢? 使用这些技术的原因是他们允许我们为从HTML中提取的文本预设标记(也可以选择style或script)。本文后面的内容会介绍到这些。...现在, 对我们要用到的技术做一个简单的定义: template是一组可被复用的标签 slot是页面中指定元素的占位符 shadow dom是dom树,我们用script引入它之前没有存在于页面我们开始编码后...关于布局你可以随便一点,重点是放置一个slot去提取关键点。我们使用js脚本把template添加到页面之前, 页面上什么都不会渲染出来。...再把这些关键点就添加到页面底部(keyPointsSection.appendChild)。我们遍历处理所有的关键点。

89730

Web阶段:第一章:HTML语言

需求1:把 换行标签 变成文本 转换成字符显示页面上 举例: 我很&amp;lt;br&amp;gt;帅!...框架标签 (内嵌窗口) iframe 标签 可以一个页面上,开一个窗口,单独加载(显示)一个页面内容 src 属性设置 需要单独显示的哪个页面的 地址(可以相对路径,也可以是绝对路径) width...设置一个名称 2、给a标签的target属性设置需要跳转的iframe的name属性值 举例: <iframe src="./6.表格标签.html" width="500" height...当我们需要给服务器发送一些信息,而这些信息,不希望用户看到。这个时候就可以使用隐藏域。...如果表单项的数据没有发送给服务器 1、表单项必须要有name属性,没有name属性提交表单的时候。数据不会发给服务器。 2、单选、复选框、(下拉列表项可选)。都要添加value属性。

89110

【译】模拟鼠标移动

这些图表仅显示一个维度(x轴,从左到右),但使用单形噪音算法,你可以获得多个维度的值。我们的例子我们将需要两个维度的值,对应着假鼠标的X和Y坐标。...加载噪声脚本后,我们可以开始每一帧上使用它来使鼠标移动。...我将使用鼠标图像放置在演示,并且通过一个 mouse 类来使得它的 position 是 fixed,当然你可以为自己的项目设置其他任何动画。...> 控制移动 在上述代码我们可以通过更改第三个参数的值来更新鼠标的速度。...定义一个速度比率 const speed = a * 0.0005; // 控制鼠标速度 const noiseX = (noise.simplex3(1, 0, speed) + 1) / 2; 我们可以通过从其位置添加更多噪声来增加方向变化的随机性

3.2K30

wordpress怎么用AMP加速器呢

无数的网站现在都有AMP版本的页面,许多开发者正在学习使用AMP——在这里,我们和ytkah一起来学习使用WordPress来使用AMP。   谷歌非常重视,这也是他们搜索引擎排名的标准之一。...在这种情况下,谷歌正在使AMP几乎成为许多网站的必需品。在这篇文章,ytkah将给大家介绍谷歌的加速移动页面项目的详细信息。这包括您的WordPress站点中调用它的步骤。     ...   尽管 AMP HTML 网页的大多数标记都是常规 HTML 标记,但部分 HTML 标记替换为了 AMP 专用标记(另请参阅 AMP 规范HTML 标记)。...利用这些自定义元素(称为 AMP HTML 组件)可以轻松高效地实现常见的模式。   例如,amp-img 标记可提供完整的 srcset 支持,即使尚不支持该标记的浏览器也是如此。   ...AMP 网页通过 HTML 标记被搜索引擎和其他平台 发现。您可以选择分别提供您网页的 AMP 版本和 AMP 版本,而不仅仅提供 AMP 版本。

1.5K20

Selenium自动化测试-8.iframe处理

写自动化脚本有时会遇到 iframe嵌套页面,这时直接定位是不行的,今天我们介绍怎么处理iframeiframeHTML标签,作用是文档的文档,或者浮动的框架(FRAME)。...我们发现要定位的这个元素iframe嵌套页面里,我们要操作这个元素,需要先切换到iframe页面,才能正常定位。...2.如果是动态id或者没有id和name属性,可以xpath或css定位解决。 检查发现126邮箱id="x-URS-iframexxxxxx" 是动态id, 所以,我们不能直接通过id定位。...结果报错,因为iframe框架内,没有切换到主文档,不能直接定位到主文档的元素。 ?...> 比如这个源码,有三层iframe嵌套,如果我们想定位到id="eWebEditor"这一层,代码如下: driver.switch_to.frame(

1.4K20

鹅厂原创 | AMP 初探

具体可参见【AMP 实战】 2 AMP JS AMP JS 库主要做了以下工作: 管理资源加载 实现 AMP HTML 自定义标签 最佳性能优化做法,比如 iframe 沙盒化、预先计算所有元素的布局...举个栗子,比如说图片,html 解释一个 img 标签的时候,要去异步加载一个图片资源,加载图片之前,不能阻塞页面渲染,因此我们首先要渲染一个图片的占位符,比如 alt。...地址栏输入:www.baidu.com 百度官网搜索:MIP 然后点击 MIP 官网结果就可以看到效果了 下面是操作的录制: 可以看到,MIP 页面的秒开体验,再和 MIP 页面的一比,简直一个天上一个地下...--省略-->     上面最主要就是用到了然后我们通过代理, chrome 打开, url 末尾加上 #development=1...您殚精竭力想要的技术资料,在演讲分享,就能轻易获得! 您百思不解的问题,与技术大神的对话,就会灵光乍现迎刃而解! 您想要接触的技术公司,大会的现场也能轻松遇到!

1K20

DWR文档之 技巧和要点

向回调函数传递参数 通常我们需要把额外的信息传递给回调函数,但是所有的回调函数只有一个参数(远程方法的返回值),它应该更灵活。 这里专门有一整页专注于这个问题,可以帮助你解决这个问题。...你还可以将所有的 javascript 文件合并到一个文件,然后使用 DOJO compressor 压缩来减小文件的体积。...我们将发布一个补丁使得 DWR web 程序启动的时候可以使用时间来标记 Javascript 文件,但是这些并不是最好的解决方法,因为上面所说的方法非常简单并且可以很大程度上压缩合并 Javascript...=728x15_0ads_al&amp;output=html&amp;url=file%3A%2F%2F%2FH%3A%2FnewBooks%2F%E7%BD%91%E7%AB%99%E4%B8%8B...> 相关文档_ Ajax开发框架+用户名检测实例(调试通过) - Jul 03, 2006 Ajax按需读取数据生成下级菜单[转] - Jul 03, 2006 AjaxPHP开发的应用[转]

82520

Selenium自动化测试-8.iframe处理

写自动化脚本有时会遇到 iframe嵌套页面,这时直接定位是不行的,今天我们介绍怎么处理iframeiframeHTML标签,作用是文档的文档,或者浮动的框架(FRAME)。...我们发现要定位的这个元素iframe嵌套页面里,我们要操作这个元素,需要先切换到iframe页面,才能正常定位。...2.如果是动态id或者没有id和name属性,可以xpath或css定位解决。 检查发现126邮箱id="x-URS-iframexxxxxx" 是动态id, 所以,我们不能直接通过id定位。...结果报错,因为iframe框架内,没有切换到主文档,不能直接定位到主文档的元素。 ?...> 比如这个源码,有三层iframe嵌套,如果我们想定位到id="eWebEditor"这一层,代码如下: driver.switch_to.frame(

1.9K20

存储型XSS的攻防:不想做开发的黑客不是好黑客

测试过程我们一般是使用: alert(1) 通过这段js代码,弹个框来证明存在xss漏洞。那么,可能新手就会问了,弹个框有什么用呢?...> 可以看到,我们对传入的四个参数完全没有处理,而是直接存入数据库。 所以,只要我们这样输入: ? 提交之后,系统会自动刷新页面出现弹框: ? 点击确定后,你会发现留言内容和留言者的部分都为空。...可以看到弹框成功! ? 可是你也能看到,由于使用了iframe标签,留言板的样式已经变形了。实战尽量不要用。 0x05、过滤特殊字符 优秀的开发,永不认输!你个小小的黑阔,不就是会插入js代码么?...可以看到,我们输入的内容全部显示页面上了。 ? 可是却没有弹框。 我们鼠标右键,查看网页源代码: ?...实际上,我们输入的内容已经变成了HTML实体: <iframe src=&amp;#106;&amp;#97;&amp;#118;&amp;#97;&amp;#115;&amp;#99;&amp;

1.8K20

AMP 初探

从目前官方统计数据看来,速度平均有 4 倍提升 AMP 是一个 Github 上的开源项目(传送门) 在我看来,它是一套解决方案,我们的移动页面使用了这套解决方案之后,就可以得到提升加载速度的体验...具体可参见【3 AMP 实战】 1.2.2 AMP JS AMP JS 库主要做了以下工作: 管理资源加载 实现 AMP HTML 自定义标签 最佳性能优化做法,比如 iframe 沙盒化、预先计算所有元素的布局...举个栗子,比如说图片,html 解释一个 img 标签的时候,要去异步加载一个图片资源,加载图片之前,不能阻塞页面渲染,因此我们首先要渲染一个图片的占位符,比如 alt。...最后最重要的事情就是, google 搜【腾讯课堂】的时候,我们AMP 页面被搜到了,当用户点击这个搜索结果的时候,打开的并不是http://m.ke.qq.com/index.html,而是http...可以看到,MIP 页面的秒开体验,再和 MIP 页面的一比,简直一个天上一个地下,要注意到,这可是 PC!

1.4K60

网页如何挂马的是如何实现的

黑客入侵了一些网站之后,将自己编定的网页木马嵌入到其网站的页面(通常是在网站主页),利用该网站的流量将自己的网页木马传播出去从而达到自己的目的。...三、网页挂马步骤 1、申请网站空间:将木马程序和网马全部上传到该网站空间,使其可以被访问,假如申请成功后的网站空间地址为“http://www.xxx.com/xxx”; 2、上传木马程序:上传完成后木马的访问地址为...> iframe> center> html> 9、伪装调用 <frameset rows="444,0...;<em>amp</em>;<em>amp</em>;<em>amp</em>;<em>amp</em>;<em>amp</em>;<em>amp</em>;quot;) else document.write ("&amp;amp;amp;amp;amp;amp;amp;quot;) end if script...var u_num = getUrlParameterAdv("showmatrix_num",v.getAttribute(\\\\\'src\\\\\')); document.write("<iframe

4.8K20

手摸手打造类码上掘金在线IDE(三)——沙箱环境

好了,闲言少叙,多放白糖,我们正式开始,码上掘金系列之—— 沙箱环境 开始之前我们需要先具备几个前置条件 沙箱 传统的描述Sandbox(又叫沙箱)即是一个虚拟系统程序,允许你沙箱环境运行浏览器或其他程序...自执行的匿名函数IIEF 我们知道,浏览器中有一个window,我们的变量声明会或多或少的影响全局环境 但是人们发现,由于函数的特殊作用通过闭包的方式,可以将多余的变量,保存在闭包,只留下个别变量挂在全局...,这也是现在qiankun的沙箱的主流解决方案, iframe 上述的沙箱解决方案,由于都是同一个环境中去执行,只是去模拟沙箱的模式,虽然,能在一定程度上解决问题,但是总是不彻底,于是我们在线IDE...界 通常就会使用一个彻底的解决方案,iframe 因为你总归要在ifarme 中去渲染视图,并且具有天然的样式隔离 所以现在市面上主流的编辑器,都是采用的这个方案 iframe 自不用过多介绍,这个标签可以创造一个独立的浏览器原生级别的运行环境...我们通过 Window.postMessage实现沙箱和编辑器的通信 iframe 通信事件设计 由于是我们整个在线IDE最重要的部分就是编译和渲染,于是沙箱和外接的通信尤为重要 他要具备几个步骤 1

77820

分享一个开源免费、功能强大的视频播放器库

Media 相关标签的功能,比如我们现在可以给 video 标签添加一些自定义的功能,比如添加一个 data-poster 属性来当作视频预览封面,比如添加一个 track 标签来添加字幕文件,写法如下...如果要引用 Youtube,那么只需要给 div 添加一些 class 即可,比如:   <iframe     ...;rel=0&amp;enablejsapi=1"     allowfullscreen     allowtransparency     allow="autoplay"   >... 样式自定义 另外 Plyr 还支持我们添加一些自定义样式,我们需要使用 CSS Custom Properties 即可轻松实现样式复写。...比如说,我们想要把默认的按钮颜色由蓝色改成红色,那就可以直接添加 CSS 样式: :root {   --plyr-color-main: red } 这样 Plyr 就可以读取这个 CSS 属性,然后实现样式控制了

1.6K30

发现和分发页面【ytkah英译AMP-4】

某些情况下,您可能希望拥有同一页面的AMP版本和AMP版本,例如,一篇新闻文章。思考一下:如果谷歌搜索发现该页面的AMP版本,它如何知道有一个“配对”AMP版本的它?...使用链接页面   为了确定非AMP页面和AMP页面应该被“配对”在一起,我们添加标签的形式,amp页面上添加amp页面的信息,反之亦然。...举个例子,我们有两个页面,内容相同,一个是非AMP页面https://www.example.com/url/to/full/document.html,另一个是AMP页面https://www.example.com.../url/to/amp/document.html,现在开始分别给他们加链接页面,注意是交叉匹配   AMP页面的中加入如下代码   AMP页面的中加入如下代码 <link rel="canonical

40820
领券