Eric.Liang 发表于 2018-11-9 11:18:02

帮你打开活字格更神奇的功能:五十,集成自定义HTML页面(下)

前几节课中我们学习了活字格配合自定义页面去进行数据交互,我们可以在自定义页面中自由获取活字格中的所有数据,包括单元格内容,表格内容,图片等等。
那么,如果我想在活字格内部获取自定义的页面又该怎样去获取呢?爱学习的小伙伴应该已经自己尝试过了。本节课主要为大家讲解的就是如何在活字格内部获取自定义页面的数据。


效果如下:


操作步骤:
1.首先,和上一节课一样,我们需要有一个自定义的html页面。
<html>
    <head>
      <meta charset="utf-8">
    </head>
    <body>
      <H1>你好,我是活字格用的自定义页面。</H1>
      <input id="test1" value="你好"/>
      <input id="test2" value="我是活字格"/>
      <input id="test3" value="我能做很多系统"/>
      <input id="test4" value="我是个开发智力的软件"/>
    </body>
</html>

2.设计活字格页面。与上节课相反,将HTML页面插件设置在页面左上角,将该HTML页面插件单元格设置为隐藏,这样浏览器打开就只能看到活字格的页面。


3.HTML页面插件绑定对应的自定义HTML页面名称。


4.在自定义的HTML页面中每个元素都是有自己的ID,那么我们可以通过JS代码去获取相应的对象。不过有一点需要注意,因为自定义页面是在Iframe里,JS的代码也是有特殊的方式去获取。
var iframe = document.getElementsByTagName('iframe');//获取Iframe对象
var obj = iframe.contentWindow//获取Iframe窗口内容
alert(obj.document.getElementById("test1").value);//在Iframe中通过ID获取对应的元素

工程文件和自定义HTML页面见附件。
页: [1]
查看完整版本: 帮你打开活字格更神奇的功能:五十,集成自定义HTML页面(下)