在ionic中使用内嵌模块，点击出黑屏是怎么回事

黑屏原因我给人理解是缺少一个父容器背景去包裹我们的目标页面，所以在尚未加载到目标页面的时候就显示黑屏。

我的解决方案是添加父容器。如果大家指导ionic的tabs就应该知道什么是父容器了。

父页面中的iframe :如下

<iframe name="sunPage" id="sunPage" src="sun.html" width="300px" height="auto"></iframe>

1.父iframe 调用子iframe的方法

$("#sunPage")[0].contentWindow.sunMethod()

contentWindow 对象可以获取子iframe的window对象,兼容所有浏览器.

sunMethod() 这是子iframe中的方法名.

如果iframe的id不知道，比如用jbox 的open方法打开一个ifram.可以借助jquery的find方法找到iframe节点。

如：$(selector).find("iframe")[0].contentWondow.sunMethod()

2.父iframe 修改子iframe标签中的数据:如修改子iframe中的input的值.

$('#sunPage').contents().find("#sunP").text("dsssssdd")

jQuery contents() 方法: http://www.w3school.com.cn/jquery/traversing_contents.asp 介绍

ID #sunP 是子iframe中的input的id

3.子iframe调用父iframe中的方法

window.parent.daoYo("asdadasds")

window.parent 直接调用window对象的parent

daoYo("asdadasds")父页面的方法名,可传参数

4, 子iframe 修改父iframe标签中的数据:如修改父iframe中的input的值.

这个就不用说了.

window.parent.$("#button3").text("ssssssssssss")

第一步，创建静态页面checkbox.html，并引入ionic的相关CSS文件和JS文件，如下图所示：

第二步，创建复选框容器，利用无序列表展示不同样式的复选框，代码如下：

<li class="item item-checkbox">           

<label class="checkbox">                     

<input type="checkbox" />            

</label> 松树</li>

第三步，第二步中没有添加checkbox-样式class，这里添加checkbox-assertive，代码如下：

<li class="item item-checkbox">        <label class="checkbox checkbox-assertive">              <input type="checkbox" />        </label>        梨树</li>

第四步，添加一个复选框，给定样式class为checkbox-balanced，代码如下：

<li class="item item-checkbox">         <label class="checkbox checkbox-balanced">               <input type="checkbox" />          </label>           柳树</li>

第五步，添加一个复选框，给定样式class为checkbox-calm，代码如下：

<li class="item item-checkbox">         <label class="checkbox checkbox-calm">               <input type="checkbox" />          </label>           樟树

</li>

第六步，添加一个复选框，给定样式class为checkbox-dark，代码如下：

<li class="item item-checkbox">         <label class="checkbox checkbox-dark">               <input type="checkbox" />          </label>          梧桐</li>

---