動態加載 javascript

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 function 中調用方法應該沒有問題。

動態加載 javascript

問題描述

1 個解決方案

解決方案1
0 2011-05-31 11:55:27

動態加載 javascript

問題描述

1 個解決方案

解決方案1 0 2011-05-31 11:55:27

解決方案1
0 2011-05-31 11:55:27