门户开发-组件介绍-iframe、HTML-门户管理-O2OA企业应用开发平台-人人都是协同系统开发专家

门户开发-组件介绍-iframe、HTML

时间：2023-03-20

O2OA(翱途)开发平台[下称O2OA开发平台或者O2OA]拥有门户页面定制与集成的能力，平台通过门户定制，可以根据企业的文化，业务需要设计符合企业需要的统一信息门户，系统首页等UI界面。从本篇讲的是页面设计器元素组件的iframe组件和HTML组件。

一、先决条件

1、O2Server服务器正常运行，系统安装部署请参考文档《如何在服务器上安装部署O2OA》

2、以拥有管理员权限或拥有门户管理员（PortalManager角色）的用户账号登录O2OA(翱途)开发平台，如：xadmin

3、可以进入门户管理平台并且有开发权限，请参考《门户开发-门户设计开发入口和权限说明》

二、iframe组件

image (5).png

Iframe允许您嵌入其他网站的页面

Iframe特有的基本属性有SRC：

image (6).png

SRC有两个选项：“固定值”和“脚本”。

固定值：直接在下面的文本框中输入要嵌入的web页面的url地址。

脚本：在脚本编辑器中输入脚本，返回要嵌入的web页面的url地址。

Iframe事件和文本一致

Iframe对象可以通过以下脚本获取：

var el = this.page.get(name); //name为iframe的标识

获取的Iframe有以下方法可以使用：

方法名（属性）	用法	描述
show	el.show()	显示元素
hide	el.hide()	隐藏元素
addEvent	el.addEvent(name, fun)	给元素绑定系统事件。 name：事件按名称 fun：执行的方法
node	var dom= el.node	获取html原生Dom对象

要改变iframe的页面嵌入地址，可使用如下脚本：

this.page.get("name").node.src=newurl;  // name为iframe的标识, newurl为web页面url地址

image (7).png

HTML组件允许您直接写原生的html内容来展现页面：

HTML组件中的<script>标签中的代码不会被执行，如果对HTML中的dom元素绑定事件或运行脚本，最好将代码放入页面的load事件中。比如：

var node = this.page.node().getElement("#htmlNode");
node.addEvent("click", function(){
    alert("div clicked")
});

HTML组件没有事件。

logo_all@1.5x.png

以上是门户设计器中iframe和HTML组件的简单说明，希望对您有帮助，关于门户页面开发的更多介绍请参考以下文章：