mip-iframe
优质
小牛编辑
128浏览
2023-12-01
<mip-iframe>
是用来支持在 MIP 中嵌入第三方内容的一种方式,需要注意的是:所嵌入的内容强制是符合 HTTPS 协议的。
如您的网站还不支持 HTTPS,可使用百度云加速或其他同类型服务,开通 HTTPS。百度云加速开通步骤见文档。
标题 | 内容 |
---|---|
类型 | 通用 |
支持布局 | responsive, fixed-height, fixed |
所需脚本 | 无 |
示例
基本使用
<mip-iframe
allowfullscreen
src="https://www.mipengine.org/article/instant-pageview.html"
width="400"
height="300"
allowtransparency="true">
</mip-iframe>
查看例子 编辑示例加布局(fixed-height
为例)
<mip-iframe
layout="fixed-height"
src="https://www.mipengine.org/article/instant-pageview.html"
allowfullscreen
width="400"
height="300"
allowtransparency="true">
</mip-iframe>
查看例子 编辑示例加 srcdoc
<mip-iframe
allowfullscreen
srcdoc="
<div>You say that you love rain,</div>
<div>but you open your umbrella when it rains.</div>
<div>You say that you love the sun,</div>
<div>but you find a shadow spot when the sun shines.</div>
<div>You say that you love the wind,</div>
<div>but you close your windows when wind blows.</div>
<div>This is why I am afraid,</div>
<div>because you say that you love me too.</div>
"
width="400"
height="300"
sandbox=""
allowtransparency="true">
</mip-iframe>
查看例子 编辑示例属性
src
说明:与原生 <iframe>
的 src
属性作用一致
必选项:是
类型:URL
单位:无
取值:必须要使用 HTTPS 地址
默认值:无
width
说明:宽度,不是实际宽度,与高度属性配合来设置图片比例,详见组件布局 必选项:是
类型:数字
单位:无
默认值:无
height
说明:高度,不是实际高度,与宽度属性配合来设置图片比例,详见组件布局 必选项:是
类型:数字
单位:无
默认值:无
allowfullscreen
说明:与原生 <iframe>
的 allowfullscreen
属性作用一致
必选项:否
取值:空
默认值:无
srcdoc
说明:与原生 <iframe>
的 srcdoc
属性作用一致
必选项:否
类型:HTML_code
单位:无
取值:要显示在 <iframe>
中的 HTML 内容。必需是有效的 HTML 语法
默认值:无
sandbox
说明:与原生 <iframe>
的 sandbox
属性作用一致
必选项:否
类型:字符串
单位:无
取值:"", allow-same-origin
, allow-top-navigation
, allow-forms
, allow-script
默认值:无
allowtransparency
说明:与原生 <iframe>
的 allowtransparency
属性作用一致
必选项:否
类型:字符串
单位:无
取值:"", true, false
默认值:无