Question

我的HTML表单中有2个链接。当用户点击链接时，我希望加载相关的javascript页面而不重新加载整个页面

我在HTML页面中使用了以下代码：

<body id="b">
<h1>Page that switch between CSS and JS</h1>
<div class="container" id="content">
  <div class="link" id="li">
    <ul class="menu" id="nav">    
      <li><a id="three" href="#" onclick="switchjs1();">JavaScript 1</a></li>
      <li><a id="four" href="#" onclick="switchjs2();">JavaScript 2</a></li>      
    </ul>
  </div>
  <div class="content" id="con">
    <form action="" method="post" class="f1" id="f1">
        <table class="t">
            <tr>
            <td><label>Label 1</label></td>
            <td><input type="button" id="1" value="Show 1" class="btn1"/></td>
            </tr>
            <tr>
            <td><label>Label 2</label></td>
            <td><input type="button" id="2" value="Show 2" class="btn2"/></td>
            </tr>
            <tr>
            <td><label>Label 3</label></td>
            <td><input type="button" id="3" value="Show 3" class="btn3"/></td>
            </tr>
            <tr>
            <td><label>Label 4</label></td>
            <td><input type="button" id="4" value="Show 4" class="btn4"/></td>
            </tr>
        </table>
    </form>
  </div>
</div>
</body>

以下脚本代码：

<script type="text/javascript">
    var headID = document.getElementsByTagName("head")[0];         
    var jsNode = document.createElement('script');
    jsNode.type = 'text/javascript';
    jsNode.id = 's1';

    headID.appendChild(jsNode);

    function switchjs1()
    {
        var js = document.getElementById("s1");
        js.removeAttribute('src');
        js.setAttribute("src", "js1.js");
    }

    function switchjs2()
    {
        var js = document.getElementById("s1");
        js.removeAttribute('src');
        js.setAttribute("src", "js2.js");
    }
</script>

通过上面的代码我创建了一个<script>标记，我想根据用户点击的链接设置src属性的值。但它只加载与首先由用户点击的链接相关的JavaScript文件。例如，如果用户点击“javascript 1”链接，则会加载js1.js文件，但当用户点击“javascript 2”链接时，它不会加载js2.js文件。

请帮助我，因为它已经成为一个大问题。谢谢。

Answer 1

要动态加载javascript，请使用以下代码：

function IncludeJavaScript(file) {
if (document.createElement && document.getElementsByTagName) {
    var head = document.getElementsByTagName('head')[0];

    var script = document.createElement('script');
    script.setAttribute('type', 'text/javascript');
    script.setAttribute('src', file);

    head.appendChild(script);
} else {
    alert('unsupported browser');
}
}

然后您可以点击按钮插入de javascript：

IncludeJavaScript("url_to_your_javascript");

但是，我想知道是否所有的事件处理器都已设置好，你可能需要解决这个问题。在新的javascript函数中调用方法应该不是问题。

动态加载JavaScript

1 个答案: