OnClick更改JavaScript文件

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文件

在线演示

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

例如，如果要演示lenovo，请通过单击/选择Lenovo选项，我将仅加载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.");
});

以下两个链接也可以为您提供帮助。

示例：您的代码中具有以下链接。 像这样给一些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 个解决方案

解决方案1
1 已采纳 2016-01-28 08:18:03

解决方案2
1 2016-01-28 08:21:09

OnClick更改JavaScript文件

问题描述

2 个解决方案

解决方案1 1 已采纳 2016-01-28 08:18:03

解决方案2 1 2016-01-28 08:21:09

解决方案1
1 已采纳 2016-01-28 08:18:03

解决方案2
1 2016-01-28 08:21:09