`
可执行
  • 浏览: 17439 次
  • 性别: Icon_minigender_1
  • 来自: 南京
社区版块
存档分类
最新评论

开发可拖动portal门户遇到javascript多实例冲突问题,解决方案

阅读更多
最近在为公司开发一个通用的门户发布平台,项目做了一大半了,突然遇到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是未知的)


详细方案还在讨论中,公司一大帮人跟后面碎蛋中 。。。。








分享到:
评论

相关推荐

    easyui portal可拖拽到任意位置

    "EasyUI Portal 可拖拽到任意位置"这个实例,是 EasyUI 库中关于门户(Portal)布局的一个功能展示,允许用户通过鼠标操作自由调整各个面板的位置,从而实现高度自定义的界面布局。 EasyUI 的 Portal 布局是一种...

    websphere portal v6.0 主题和皮肤的开发

    - 文件名称列表中的"主题&皮肤开发"可能是一份综合教程或指南,涵盖这些主题相关的实例和代码片段,可以帮助开发者快速上手和解决问题。 4. **测试与优化**: - 在开发过程中,不断进行跨浏览器和设备的测试,...

    extjs portal 实例

    在描述中提到,实例已经实现了portal的拖拽功能,这意味着用户可以通过鼠标操作,将portlet从一处移动到另一处,调整它们在页面上的位置。这种交互性是通过ExtJS的拖放API(Drag and Drop API)实现的,它提供了创建...

    jQuery支持自定义拖拽布局插件Portal.zip

    这个“jQuery支持自定义拖拽布局插件Portal.zip”文件显然是一个包含jQuery插件的压缩包,该插件允许用户在网页上创建可自定义拖放的布局。在本文中,我们将深入探讨jQuery、拖拽布局以及如何利用这种插件来增强用户...

    jquery portal页面源码

    总的来说,这个"jquery portal页面源码"项目是一个结合了jQuery、jQuery UI和可能的jqPlot插件的前端开发实例,它展示了如何利用这些工具创建一个可自定义、可拖动的Portal页面,以提高用户体验和工作效率。...

    ArcGIS API for JavaScript 开发教程

    **ArcGIS API for JavaScript 开发教程** ArcGIS API for JavaScript 是Esri公司提供的一款强大的地图开发工具,主要用于构建交互式的Web地图应用。本教程将深入探讨如何利用此API进行地图开发,帮助开发者创建功能...

    zktest_DEMO.rar_DEMO_ajax zk demo_portal_zk port_zk portal

    3. **ZK Portal**:ZK Portal是ZK框架的一部分,提供了多窗口、可定制的布局管理。用户可以通过拖放操作来调整页面上的小部件(portlet),实现个性化的工作空间。 4. **Demo的应用价值**:这样的DEMO对于初学者来...

    ArcGIS for JavaScript3.27资源包( API+SDK两个资源包)

    ArcGIS for JavaScript 是 Esri 公司推出的一款强大的地图开发库,主要用于构建基于Web的地理信息系统应用。这个3.27版本的资源包提供了API和SDK两个部分,帮助开发者高效地在网页上创建交互式的地图应用。 **API...

    arcgis for js api sdk 开发指南

    Esri公司推出的ArcGIS平台是当前市场上最受欢迎的GIS解决方案之一,其提供的JavaScript API更是为开发者提供了强大而灵活的地图应用开发能力。 本文旨在通过对《ArcGIS for JS API SDK 开发指南》的总结,帮助读者...

    webgis学习初步arcgis api for js

    ".sln"和".v11.suo"是Visual Studio的项目解决方案文件和用户选项文件,它们与C#或Visual Basic项目相关。在这个WebGIS学习环境中,它们可能是用于辅助开发或调试的,例如,可能包含了一个ASP.NET项目,该项目可能...

    extjs小例子

    "portal"作为压缩包子文件的文件名,可能是项目的一个目录或者主入口文件,通常在EXTJS中,"portal"可能指的是一个包含多个可定制小部件的门户布局示例,这些小部件可以是新闻、天气预报或其他信息展示模块。...

    CSS学习例子 推荐

    10. **Test Portal-prototype移动窗口.rar**:这是一个使用Prototype库实现的可拖动窗口的示例,CSS处理了窗口的边框、背景、阴影和拖拽时的视觉反馈。 通过这些实例,你可以深入学习CSS的布局技巧、选择器用法、...

Global site tag (gtag.js) - Google Analytics