mip-iframe是什么 mip-iframe怎么用

mip-iframe 是用来支持在 mip 中嵌入第三方内容的一种方式，需要注意的是：所嵌入的内容强制是符合https协议的，下面请看详细的介绍。

如您的网站还不支持https，可使用百度云加速或其他同类型服务，开通https

标题	内容
类型	通用
支持布局	responsive, fixed-height, fixed
所需脚本	无

示例

基本使用

<mip-iframe

allowfullscreen

srcdoc="<p>123</p>"

src="http://m.baidu.com"

sandbox=""

allowfullscreen

width="400"

height="300"

allowtransparency="true"> 

</mip-iframe>

加布局（fixed-height为例）

<mip-iframe

layout="fixed-height"

height="50"

allowfullscreen 

srcdoc="<p>123</p>"

src="http://m.baidu.com"

sandbox=""

allowfullscreen

width="400"

height="300"

allowtransparency="true"> 

</mip-iframe>

属性

src

说明：与原生iframe的src属性作用一致

必选项：是

类型：URL

单位：无

取值：必须要使用https地址

默认值：无

width

说明：与高度（height）的比值被mip-iframe用来计算区域的比例和大小

必选项：是

类型：数字

单位：无

默认值：无

height

说明：与宽度（width）的比值被mip-iframe用来计算区域的比例和大小

必选项：是

类型：数字

单位：无

默认值：无

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

默认值：无

mip-carousel 用来支持 mip 中图片的一种展示方式，支出多图轮播，下面将为大家详细介绍怎么实现。

标题	内容
类型	通用
支持布局	fixed-height,responsive
所需脚本	无

示例

response 布局

<mip-carousel 

layout="responsive" 

width="600" 

height="400"> 

<mip-img src="http://a2.att.hudong.com/71/04/300224654811132504044925945_950.jpg">

</mip-img> 

<mip-img src="http://www.bz55.com/uploads/allimg/150305/139-1503051FS0.jpg"> 

</mip-img> 

<mip-img src="http://img3.3lian.com/2013/v9/58/d/25.jpg"> 

</mip-img> 

</mip-carousel> 

自动轮播

<mip-carousel 

autoplay 

layout="responsive"

width="600" 

height="400"> 

<mip-img src="http://a2.att.hudong.com/71/04/300224654811132504044925945_950.jpg"> 

</mip-img> 

<mip-img 

src="http://www.bz55.com/uploads/allimg/150305/139-1503051FS0.jpg"> 

</mip-img> 

<mip-img 

src="http://img3.3lian.com/2013/v9/58/d/25.jpg"> 

</mip-img> 

</mip-carousel> 

设置轮播时间间隔

<mip-carousel 

autoplay 

defer="1000"

layout="responsive" 

width="600" 

height="400"> 

<mip-img 

src="http://a2.att.hudong.com/71/04/300224654811132504044925945_950.jpg"> 

</mip-img> 

<mip-img 

src="http://www.bz55.com/uploads/allimg/150305/139-1503051FS0.jpg"> 

</mip-img> 

<mip-img 

src="http://img3.3lian.com/2013/v9/58/d/25.jpg">

</mip-img> 

</mip-carousel> 

加指示器

<mip-carousel 

autoplay 

defer="1000" 

layout="responsive" 

width="600" 

height="400" 

indicator 

> 

<mip-img 

src="http://a2.att.hudong.com/71/04/300224654811132504044925945_950.jpg">

</mip-img> 

<mip-img 

src="http://www.bz55.com/uploads/allimg/150305/139-1503051FS0.jpg">

</mip-img>

<mip-img 

src="http://img3.3lian.com/2013/v9/58/d/25.jpg"> 

</mip-img> 

</mip-carousel> 

加翻页按钮

<mip-carousel 

autoplay 

defer="1000"

layout="responsive" 

width="600" 

height="400"

indicator 

buttonController 

> 

<mip-img 

src="http://a2.att.hudong.com/71/04/300224654811132504044925945_950.jpg">

</mip-img> 

<mip-img 

src="http://www.bz55.com/uploads/allimg/150305/139-1503051FS0.jpg"> 

</mip-img> 

<mip-img 

src="http://img3.3lian.com/2013/v9/58/d/25.jpg"> 

</mip-img> 

</mip-carousel> 

加副标题

<mip-carousel
    autoplay
    defer="1000" 

layout="responsive" 

width="600" 

height="400"

indicator
    buttonController
    >
    <a target="_blank" href="http://wenda.tianya.cn/m/question/1almfj0foas94gc7vtoq6ejbfbmdk3e78ehaa">
        <mip-img 

src="http://www.bz55.com/uploads/allimg/150305/139-1503051FS0.jpg" layout="responsive" 

width="600"

height="400">

        </mip-img>
        <div class="mip-carousle-subtitle">这里是title2</div>
    </a>
    <mip-img 

src="http://www.bz55.com/uploads/allimg/150305/139-1503051FS0.jpg">
    </mip-img>
    <mip-img 

src="http://img3.3lian.com/2013/v9/58/d/25.jpg">
    </mip-img>
</mip-carousel>

点击图片跳转

非 mip-carousel 直接子级元素的 mip-img 节点需要设置 width 和 height 属性

<mip-carousel
    autoplay
    defer="1000"

layout="responsive" 

width="600" 

height="400">
    <mip-img 

src="http://a2.att.hudong.com/71/04/300224654811132504044925945_950.jpg">

</mip-img>

<a target="_blank" href="http://wenda.tianya.cn/m/question/1almfj0foas94gc7vtoq6ejbfbmdk3e78ehaa">  

<mip-img 

src="http://www.bz55.com/uploads/allimg/150305/139-1503051FS0.jpg" width="600" height="400">
        </mip-img>
    </a>
    <mip-img 

src="http://img3.3lian.com/2013/v9/58/d/25.jpg">
    </mip-img>
</mip-carousel>

属性

width

说明：宽度，不是实际宽度，与高度属性配合来设置图片比例

必选项：是

类型：数字

单位：无

默认值：无

height

说明：高度，不是实际高度，与宽度属性配合来设置图片比例

必选项：是

类型：数字

单位：无

默认值：无

autoplay

说明：自动轮播开关

必选项：否

类型：字符串或空

取值："",autoplay

单位：无

默认值：无

defer

说明：每次轮播的时间间隔，如果设置了autoplay，可以添加defer来指定轮播的时间间隔

必选项：否

类型：数字

单位：ms

默认值：2000

MIP组件支持的各种布局，可以让图片屏幕自适应、定高等。让我们看看下面的详细说明。

支持的布局种类

类别	强制 width	强制 height	详细说明
responsive	是	是	能够根据width、height的值，算出元素对应的比例，在不同屏幕宽度上做自适应，非常适合图片、视频等需要大小自适应的组件
fixed-height	否	是	元素的高度固定,width缺省或者取值为auto，比较适合 mip-carousel
fill	否	否	元素的大小根据父节点的大小自动撑开
container	否	否	元素的大小由他们的子节点大小决定,类似 html 的 div
nodisplay	否	否	元素不展现，即 display 为 none；这种元素可应用于：他自身展现依赖用户的点击等行为的触发
fixed	是	是	元素根据 width 和 height 固定高宽，不随 media 变化

使用

MIP 元素添加属性 layout，取值参照上面的种类

<mip-img

layout="responsive"

width="350"

height="263"

popup=""

alt="baidu mip img"

src="http://www.111cn.net//get_pic/upload/image/20161216231233.jpg">

layout 属性缺省规则

width	height	其他属性	默认布局
有	有	无	fixed
有	有	存在sizes 参数	responsive
无或取值为 auto	有	无	fixed-height
无	无	无	container

layout 默认值

所有MIP元素都会有layout。由于移动端的设计大部分是块状的，所以默认的layout是container，类似于div。如果有其它的样式需求，如inline、inline-block。可通过样式覆盖的方式修改元素display等

MIP组件有哪些？MIP组件有三种：内置组件、个性化组件以及广告组件，不同的组件有着不同的作用，下面请看详细的介绍。

1、内置组件

图片组件（mip-img）

视频组件（mip-video）

mip-pix 组件（mip-pix）

轮播组件（mip-carousel）

iframe 组件（mip-iframe）

2、个性化组件

折叠节点组件（mip-according）

动图组件（mip-anim）

app下载组件（mip-appdl）

音频组件（mip-audio）

百度统计组件（mip-stats-baidu）

筛选组件（mip-filter）

悬浮组件（mip-fixed）

表单组件（mip-form）

系统区分组件（mip-html-os）

页面跳转组件（mip-link）

菜单组件（mip-nav-slidedown）

分享组件（mip-share）

侧边栏组件（mip-sidebar）

天润统计组件（mip-stats-tianrun）

3、广告组件

广告组件（mip-ad）

如需其他组件，如广告组件和统计组件，可以参考组件开发规范开发并提交给我们。