包含与外部页面 javascript 冲突的页面 javascript答案

【问题标题】：Include page javascripts conflicting with outer page javascripts包含与外部页面 javascript 冲突的页面 javascript
【发布时间】：2012-03-05 08:17:39
【问题描述】：

我的问题有点难以解释，但我会尝试。我有 2 个 jsp 页面 Outer.jsp 和 Inner.jsp

Outer.jsp

脚本：src="tabs.js"

var PageTabs = "Tab1"

@include "Inner.jsp"

Inner.jsp

脚本：src="tabs.js"

var PageTabs = "Tab2~Tab3~Tab4"

两个 jsp 页面使用相同的 tabs.js 在页面上呈现一些选项卡元素。 “PageTabs”变量是 tabs.js 使用的许多常见变量之一。所以在渲染时会发生什么，即使在渲染 Outer.jsp 的选项卡时，tabs.js 也会采用最新的“PageTabs”变量，即 var PageTabs =“Tab2~Tab3~Tab4”。

注意：页面变量和 tabs.js 是从客户端收到的标准元素的一部分。因此，它们必须用于为应用程序提供相同的外观和感觉。我需要一种将“Inner.jsp”与访问“Outer.jsp”脚本隔离开来的方法。这将防止选项卡元素混淆使用哪些变量。

我希望我有点清楚。如果我需要提供更多说明，请告诉我。谢谢。

【问题讨论】：

标签： java javascript jsp

【解决方案1】：

JavaScript 在页面内从上到下进行解释，因此您的第二个 PageTabs 值会覆盖第一个值。一种选择是为变量使用不同的名称（并参数化 tabs.js 函数，而不是依赖全局变量。）

【讨论】：

是的，我明白这一点。不幸的是，屏幕上有很多共享元素。我知道这是一个糟糕的设计，但我将不得不忍受它。是否有一个内部页面与外部隔离？否则我将不得不完全重写 tabs.js
正如我所说，只要在同一页面内运行，JavaScript 就没有“内页”我们的“外页”上下文。您可以实施的一种选择是将内页转换为 <iframe>（如果可能）。但是如果 inner.jsp 和 outer.jsp 呈现同一页面的不同（不可分离）部分，那么您就不走运了。
谢谢，我会试试你的 IFrame 方法。

【解决方案2】：

在使用 jsp 包含时，一项非常有用的技能是使您的 .js 代码模块化。这也是封装代码和避免冲突的重要方法。

tab.js：

var tabModule = (function(my){
   var model;
   return {
      setModel: function(model){/*....*/}
      //other api functions
   }
})(tabModoule||{});

外部.jsp：

tabModule.setModel({PageTabs : "Tab1"});

Inder.jsp：

 tabModule.setModel({PageTabs : "Tab2~Tab3~Tab4"});

【讨论】：

谢谢 Mike，会试试你的方法。