Question

我有一个带有两个按钮的index.html文件：

<a class="btn btn-primary" href="pages/page1.html" target="_blank">Load init-a.js file</a>

<a class="btn btn-primary" href="pages/page1.html" target="_blank">Load init-b.js file</a>

如果我点击按钮1 ，page1.html和page2.html文件应该加载init-a.js文件，直到我回到index.html页面并点击其他选项。

如果我点击按钮2 ，

<script src="../js/init-a.js"></script>

以上标签应更改如下......

<script src="../js/init-b.js"></script>

page1.html和page2.html文件中的

PS ：默认情况下，我在所有html页面中加载init-a.js个文件

Online Demo

我有很多客户，如联想，飞利浦，三星......我想只维护一套原型（超过100个html页面）..

例如，如果我想为联想提供演示，点击/选择联想选项，我只会加载   lenovo.js文件获取lenovo相关数据，用于philips demo philips.js文件...   相关内容将被加载到所有html页面，这将很容易   对于维护，而不是为每个客户创建不同的文件夹

的index.html

<!DOCTYPE html>
<html>
    <head>
        <title>Index</title>
        <link rel="stylesheet" type="text/css" href="styles/bootstrap.min.css">
        <link rel="stylesheet" type="text/css" href="styles/master.css">
    </head>
    <body>
        <div class="text-center">
            <div class="container">
                <a class="btn btn-primary" href="pages/page1.html" target="_blank">Load init-a.js file</a>
            </div>
            <div class="container">
                <a class="btn btn-primary" href="pages/page1.html" target="_blank">Load init-b.js file</a>
            </div>
        </div>

        <script src="js/jquery.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
    </body>
</html>

INIT-a.js

$("h1.init-heading").html("Heading from <span>init-a.js</span> file");
$("p.init-paragraph").html("Paragraph from <span>init-a.js</span> file");
$("ul.init-list").replaceWith("<ul><li>Item 1 from from <span>init-a.js</span> file</li><li>Item 2 from from <span>init-a.js</span> file</li><li>Item 3 from from <span>init-a.js</span> file</li></ul>");

INIT-b.js

$("h1.init-heading").html("Heading from <span>init-b.js</span> file");
$("p.init-paragraph").html("Paragraph from <span>init-b.js</span> file");
$("ul.init-list").replaceWith("<ul><li>Item 1 from from <span>init-b.js</span> file</li><li>Item 2 from from <span>init-b.js</span> file</li><li>Item 3 from from <span>init-b.js</span> file</li></ul>");

page1.html

<!DOCTYPE html>
<html>
<head>
<title>Page 1</title>
<link rel="stylesheet" type="text/css" href="../styles/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="../styles/master.css">
</head>

<body>

    <a href="page2.html" class="btn btn-secondary btn-sm">>> Go to Page 2</a>

    <h1 class="init-heading">{Main Heading}</h1>
    <p class="init-paragraph">{Paragraph}</p>
    <ul class="init-list">
        <li>{Dummy item 1}</li>
        <li>{Dummy item 2}</li>
        <li>{Dummy item 3}</li>
    </ul>

<script src="../js/jquery.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script src="../js/init-a.js"></script>

</body>
</html>

Answer 1

至于我理解你的问题，你想动态加载JavaScript文件。以下是一些动态加载js文件的方法。你可以使用其中任何一个。

function loadjscssfile(filename){
    var fileref=document.createElement('script')
    fileref.setAttribute("type","text/javascript")
    fileref.setAttribute("src", filename)
}

loadjscssfile("myscript.js", "js") //dynamically load and add this .js file

您可以在link.button的onclick事件中触发此功能。

jQuery库还在一行中提供加载功能：

$.getScript("my_lovely_script.js", function(){
     alert("Script loaded.");
});

以下两个链接也可以帮到你。

http://www.javascriptkit.com/javatutors/loadjavascriptcss.shtml
How do I include a JavaScript file in another JavaScript file?

实施例：您的代码中有以下链接。像这样给出一些id

<a class="btn btn-primary" href="pages/page1.html" id="some_id" target="_blank">Load init-a.js file</a>

现在在您的主要javascript文件中（您在整个项目中使用的是哪个），添加以下onclick函数

$("#some_id").click(function(){
     //call above function like this.
     loadjscssfile("myscript.js", "js");
});

Answer 2

不知道你为什么要那样做。我有一个更简单的解决方案。你可以简单地在你的html 2中包含init-b.js，因为它是单独的页面。我发现使用按钮动态地将javascript文件加载到页面上真的很奇怪。

OnClick更改JavaScript文件

2 个答案: