Question

Hello所有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容器..

一个页面上可以有多个小部件，一个标签容器可以显示一个主题的信息，另一个主题的另一个tabcontainer等等。所以想要有一个可以显示6个主题信息的页面的用户将包含6个小部件/ tabcontainers在同一页面上......

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

此处还有页面

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);

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

2 个答案: