OnClick изменение JavaScript файла

У меня есть файл index.html с двумя кнопками, как:OnClick изменение JavaScript файла

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

Если я нажимаю на кнопку , page1.html и page2.html файлы должны загрузить init-a.js файл, пока я не вернулся в индекс. html и нажмите на другой вариант.

Если я нажимаю на кнопку ,

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

выше тег должен быть изменен, как показано ниже ...

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

в page1.html и page2.html файлов

PS: По умолчанию я загружаю init-a.js файл на всех html-страницах

Online Demo

У меня есть много клиентов, таких как Lenovo, Philips, Samsung ... и я хочу сохранить только один набор прототипа (более 100 страниц HTML) ..

Eg, если я хочу, чтобы дать демо-версию для Lenovo, щелкнув/выбора опции Lenovo, я просто загрузить lenovo.js файл, чтобы получить данные, связанные с LENOVO, для Филипс демо philips.js файл ... релевантный контент будет загружен в Все HTML-страницы, которые будут легко для Maintanance, вместо того, чтобы создавать различные папки для каждого клиента

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-б .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>

источник

2016-01-28 Reddy

В чем проблема? – Satpal

Он всегда загружает файл init.a.js: (... Если я нажимаю на кнопку 2, страницы1 и страница2 должны загружать файл init-b.js вместо файла init-a.js – Reddy

Вы пытаетесь создать какая-то форма одностраничного приложения, где 'page1/2.html' являются частичными, иначе вы просто переходите к этим страницам при нажатии кнопки и можете включать ваши сценарии на них как обычно. – ste2425

Что касается, как я понять Ваш вопрос, Вы хотите загрузить файл 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

Вы можете вызвать эту функцию в событии onclick вашего канала link.button.

библиотека JQuery также предоставляет функциональные возможности загрузки в одной строке:

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

Эти две ссылки также могут помочь вам.

Пример: Вы следующую ссылку в коде. Дайте некоторое идентификатор к этому, как этому

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

источник

2016-01-28 08:18:03

должно ли я добавить выше скрипт в index.html? или внутри html-страниц? Пожалуйста, предложите мне, поскольку я ** Невинный в Scripting ** :) – Reddy

Я обновил комментарий с примера ... –

Не знаю, почему вы хотели бы сделай это. У меня есть более простое решение. Вы можете просто включить init-b.js в свой html 2, поскольку это отдельные страницы. Мне очень странно использовать кнопки для загрузки файлов javascript на страницы динамически.

источник

2016-01-28 08:21:09

У меня много клиентов и один универсальный набор прототипов html ... например, если я хочу дать demo for lenovo, я просто загружу файл lenovo.js, для файла philips demips philips.js ... так что весь соответствующий контент будет загружен на все html-страницы, которые будут легки для обслуживания ... – Reddy

OnClick изменение JavaScript файла

ответ

Смежные вопросы