最近在为公司开发一个通用的门户发布平台,项目做了一大半了,突然遇到javascript多实例冲突问题,蛋都碎了!!
原理是这样的:
门户的以页面为大的容器,每个页面里面又有多个小的容器(暂且叫它控件容器),控件容器是用来放控件的,后台语言(java)在生成页面时选择对应的控件放到对应的控件容器中。
控件其实就是一大段代码,其中包括html、css、javascript代码,控件中的代码只贡空间本身用,所以后台语言只要把控件所有代码打印到空间容器中,控件中的css和javascript就会把控件表现出来。
问题来了,当同一个控件在同一个页面出现多次时,javascript就无法正常运行了,原因是javascript可能通过id来获取DOM节点,而同一个控件被在同一个页面中有多个,这就意味中存在多个相同的id标签,然后就乱了。。。
目前在考虑的解决方案:
(1)在每个控件容器中加iframe标签并以页面的形式引入控件,但是这样的话一个页面中包含了多个页面,不知道这个样会不会有什么问题,而且iframe本身处理起来不知道会不会出现瑕疵,比如不同浏览器下会不会出现滚动条什么的。。。
(2)通过后台语言给每个控件容器打印一个唯一的id,要求控件中的javascript在DOM操作时都以唯一id来选择标签。但是要怎样给这个id而只让本容器中的javascript拿到这个id呢?例如下面:
page页面内容:(用两个div表示两个控件容器)
——————————————————————————————————————
<!-- id中的1是后台语言输出的唯一标记 -->
<div id="1">
<script>
这里需要一行javascript代码
</script>
</div>
<!-- id中的2是后台语言输出的唯一标记 -->
<div id="2">
<script>
这里需要一行javascript代码
</script>
</div>
——————————————————————————————————————
在页面中标记“这里需要一行javascript代码”的地方应该是一段相同的代码,如何让这段代码执行时拿到其对应的id标签?(id的值是后台语言输入的,所以对javascript是未知的)
详细方案还在讨论中,公司一大帮人跟后面碎蛋中 。。。。
分享到:
相关推荐
以用户为中心 实现信息的集中访问,利用portal 可以方便地将登录用户所需要的,来源各种渠道的信息集成在一个统一的页面模块之内,可拖拽,拖拽后可以记忆位置
JavaScript应用实例-拖动条控件.js
easyui可拖拽的portal 在Demo中的portal文件夹直接打开html文件就可以
鼠标拖拽拖动盒子时,与盒子内某些点击事件冲突问题解决
JavaScript菜单特效实例 包括:二级相互关联菜单;多级相互关联菜单;二级树型菜单效果;可拖动的菜单;Flash菜单效果;推拉式菜单;OICQ菜单效果等。
Dragdealer.js 基于拖动的JavaScript组件,包含无穷UI滚动解决方案
22.11 Ajax效果:可拖拽的表格 22.12 JavaScript调用Web Service 22.13 用JavaScript实现编码解码 22.14 创建带属性的对象 22.15 用prototype实现JavaScript的继承 22.16 JavaScript制作哈希表 第23章 其他技巧及...
全书分为18章,分别讲解了UI布局实例集锦、控件实例集锦、自动化服务实例集锦、数据存储实例集锦、电话和短信实例集锦、图形图像实例集锦、和网络有关的实例集锦、多媒体实例集锦、Google地图实例集锦、GoogleAPI...
jquery 制作可拖拽的div实例
因为项目原因需要在gridview上实现item拖动,同时不与OnItemClick事件冲突,观网上流传的一些代码,总有一些缺憾,故在别人研究基础上加上自己的思路, 终于完美解决gridview拖拽与点击响应的冲突,现与大家分享
listview与scrollview冲突问题解决
可保存位置并自动吸附的JavaScript拖动层.rar可保存位置并自动吸附的JavaScript拖动层.rar可保存位置并自动吸附的JavaScript拖动层.rar可保存位置并自动吸附的JavaScript拖动层.rar可保存位置并自动吸附的JavaScript...
主要介绍了JavaScript实现可拖拽的拖动层Div的方法,拖拽页面中的div块可实现div块按照拖动轨迹移动的效果,涉及javascript鼠标事件、页面元素样式结合事件函数动态操作的相关技巧,需要的朋友可以参考下
[实例讲解]怎么用javascript进行拖拽
基于jquery实现的portal 拖拽实现布局调整,基于jquery实现的portal,不是easyui portal,和sortable
Extjs Portal 拖拽并保存 多个实例,直接运行。
jQuery拖拽布局插件Portal
Echarts的地图实现拖拽缩放同步功能(解决多层geo缩放、拖动卡顿问题),大屏项目显示云南省3D的地图,可拖拽缩放、地图打点、点击图标弹框等等功能。 ## 使用 - 启动调试服务: `npm start` - 构建 dist: `npm run ...