fusion2.iface.updateClientRect

1 功能说明

“动态调整页面展现”前端JS接口(由fusion2.interface.updateClientRect接口更名而来,原来接入的应用仍然可以访问更名前的接口)。
当应用可视区域变化时(包括浏览器窗口大小变化、各iframe与框架滚动条滚动等事件发生时),可回调本接口指定的方法,以便按需加载图片资源,或根据可视区域动态调整页面元素的展现。

2 接口调用说明

调用本前端接口前,应用中应该部署Fusion2的跨域文件以及引用脚本,请参阅:Fusion2文档

接口说明如下:

fusion2.iface.updateClientRect(function (rect)  { /* do sth. */ })


本接口用来向Fusion2注册一个回调方法,当客户端可视区域变化时,Fusion2回调该方法并传入rect参数,rect结构体有如下属性,分别代表可视区域的上下左右边缘相对当前页面的位置:

Object:

  bottom:
  left:
  right:
  top: 


以下示例将某个文本提示条永运固定的可视区域最上方:

fusion2.iface.updateClientRect(function (rect) { document.getElementById("bar").style.top = rect.top + "px"; });



以下示例将当前最新的值保存起来,在需要弹对话框时使用这些值确保对话框在可视区域的中心:

var clientRect = {
top : 0,
bottom : 700,
left : 0,
right : 760
}; // 设置初始区域,根据实际情况动态获取或写死
fusion2.iface.updateClientRect(function (rect) {
clientRect = rect;
});

document.getElementById("btn-open-dialog").addEventListener("onclick", function () {
var div = document.createElement("div");
div.innerHTML = xxx; // 对话框内部html
div.style.position = "absolute";
var height = 300; // 对话框高度
var width = 400; // 对话框宽度
div.style.top = (clientRect.top + clientRect.bottom - height) / 2;
div.style.left = (clientRect.left + clientRect.right - width) / 2;
}, false);


以上信息是否解决您的问题?

Copyright © 1998 - 2019 Tencent. All Rights Reserved.

腾讯公司 版权所有

有问必答 返回顶部