单个页面上有多个Javascript小部件

Question

您好所有Javascript和Widget专家。

在最近的两天里，我一直在努力工作，试图弄清楚如何启用我的窗口小部件，以便可以将其两次包含在同一页面上。

这是我所做的

1.driver.js（加载所有必需的）加载jquery，jquery-ui，wdcreate.js，并通过document.write调用设置tabs.js。

2.wdcreate.js（创建选项卡列表和内容）没什么复杂的，只需一个ui和li列表即可创建分配给wHTML的3个选项卡内容，然后通过

document.getElementById(tabid+"_mywidget_container").innerHTML = wHTML;

3.settabs.js（理想情况下应该启用选项卡）只有一行可以加载选项卡容器

$(document).ready(function() {$( "#"+tabid+"_mywidget_container" ).tabs();});

4.index.html-（包含小部件的测试页）此页面仅包含两个小部件

<script type='text/javascript'> 
    var tabid='001';
    document.write('<scr'+'ipt type="text/JavaScript" src="http://localhost:8080/demo/driver.js"></scr'+'ipt>'); 
    </script>
    <div id="001_mywidget_container"></div>

<script type='text/javascript'> 
var tabid='002';
document.write('<scr'+'ipt type="text/JavaScript" src="http://localhost:8080/demo/driver.js"></scr'+'ipt>'); 
</script>
<div id="002_mywidget_container"></div>

现在的问题是，如果我在index.html文件中仅包含一个小部件，或者如果我为此包含两个或三个，则选项卡将呈现。

有什么建议或我该怎么办？ 我曾尝试搜索并找出将这个小项目放在一起的问题，最初是使用简单的javascript并还原为jQuery（我不是Javascript专家）。 意识到这与window.onLoad有关

另请注意，在settabs中，如果不动态分配tabid，则如果我对每个tabwidget id使用两个调用，它将加载两个tab容器。

一个人可以在一个页面上有多个小部件，例如一个标签容器可显示一个主题的信息，另一个标签容器可显示另一主题的信息，依此类推。因此，希望拥有一个页面可以显示6个主题信息的用户将包括6个小部件/标签容器同一页...

感谢您的帮助。 再次感谢。

这也是页面

http://www.werindia.com/demo/index1.html - widget included one time
http://www.werindia.com/demo/index2.html - widget included two times. in reality this could be any non zero number 

http://www.werindia.com/demo/driver.js
http://www.werindia.com/demo/wdcreate.js
http://www.werindia.com/demo/settabs.js

这是带有静态容器的页面-但实际上，它们是动态的

http://www.werindia.com/demo/index3.html

Answer 1

好吧，下面这些事情毫无意义。

• 您已经将实现代码及其依赖项混入了一个文件中，并且两次加载/执行了所有代码。

• 您不仅通过脚本标签链接两次。 由于某种原因，您不得不使用document.write

• 是2012年，您正在使用document.write

• 您有一些常用的选项卡功能要击中两个div容器，并且由于某种原因，您使用的是ID而不是类。 看起来ID可能会确定在tabs.js中内置了哪些选项卡，但是我只能假设，因为您没有显示该代码。

我们不会重新附加脚本标签以使同一件事在JavaScript中发生两次。 我们两次触发功能。 或者我们在更通用的DOM元素类别中触发正确的函数。

如果以下是在这些容器中构建标签所需要的全部工作：

$(document).ready(function() {$( "#"+tabid+"_mywidget_container" ).tabs();});

那么这将更加有意义：

$(document).ready(function() {$( ".tab_container" ).tabs();});

如果您不知道HTML需要什么才能使.tab_container正常工作，我想您需要将所有这些都放下来，并比您更深入地学习基础知识。 尝试使您的JS与HTML完全分开。 在页面底部链接一次文件。 了解DOM API或至少了解jQuery的工作方式。 尝试将JS视为对HTML起作用，而不是像解析时那样简单地编写它。

Answer 2

将您的driver.js文件路径正确指向指向localhost，将其更改为http://www.werindia.com

使用以下代码生成脚本标签

var headID = document.getElementsByTagName("head")[0];         
var newScript = document.createElement('script');
newScript.type = 'text/javascript';
newScript.src = 'http://www.somedomain.com/somescript.js';
headID.appendChild(newScript);