Включить javascript и html-код из другого файла

У меня есть проект, состоящий из нескольких визуализаций, все из которых используют одно и то же раскрывающееся меню для выбора загрузки csv. Я хочу иметь возможность добавлять новые параметры один раз и изменять его во всех файлах. Лучший способ - использовать код html и javascript в одном файле и включить его в другие, так что, если я хочу добавить больше опций в раскрывающееся меню, я делаю это только в одном файле. Есть ли способ сделать это с помощью html, и если да, мне нужно изменить макет многоразового файла «А», чтобы он был правильно использован внутри остальных? Если это не может случиться с html, что это лучший способ сделать это и какие изменения я должен внести в макет кода в документах?
Вот многоразовый код, который должен быть файл A:Включить javascript и html-код из другого файла

<div id="dropdown"> 
    <select id = "opts"> 
     <option value = "ds1">Atlas</option> 
     <option value = "ds2">BioSQL</option> 
     <option value = "ds3">Coppermine</option> 
     <option value = "ds4">Ensembl</option> 
     <option value = "ds5">Mediawiki</option> 
     <option value = "ds6">Opencart</option> 
     <option value = "ds7">PhpBB</option> 
     <option value = "ds8">Typo3</option> 
    </select> 
</div> 
<script type="text/javascript"> 
    var ds1="../CSV/atlas/results/metrics.csv"; 
    var ds2="../CSV/biosql/results/metrics.csv"; 
    var ds3="../CSV/coppermine/results/metrics.csv"; 
    var ds4="../CSV/ensembl/results/metrics.csv"; 
    var ds5="../CSV/mediawiki/results/metrics.csv"; 
    var ds6="../CSV/opencart/results/metrics.csv"; 
    var ds7="../CSV/phpbb/results/metrics.csv"; 
    var ds8="../CSV/typo3/results/metrics.csv"; 
</script>

И я хочу, чтобы включить это после того, как блок стиля в файлах B, C, D и т.д., которые выглядят так:

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset="utf-8"> 
     <title>D3 Test</title> 
     <script type="text/javascript" src="../d3/d3.js"></script> 
     <script type="text/javascript" src="../d3/d3-tip.js"></script> 
     <style type="text/css"> 
      body{ 
       font: 16px Calibri; 
      } 

     </style> 
     <!--...HERE IS WHERE I WANT TO INSERT THE CODE FROM THE A FILE--> 


    </head> 
    <body> 
     <script type="text/javascript">

Я видел другие сообщения, задающие несколько одно и то же, но не нашел способ сделать это. Я думаю, что это нужно делать в основном с тем, что я вставляю как html, так и javascript-код, но я вообще новичок в этом и не могу правильно подобрать. Заранее благодарю за любую помощь.

источник

2015-09-02 John M.

Вам нужно отобразить выбор данных «csv»? или загрузить html/script, где хранится скрипт? – Klaujesi

Мне нужно загрузить сценарий, чтобы я мог использовать код в файле A. Ответ с использованием php просто работал на моем университетском сервере. Теперь мне просто нужно установить php на свой компьютер. Спасибо за предложение. @Klaujesi –

Это сделано с PHP просто назвать его так:

<?php include('file.html'); ?>

источник

2015-09-02 21:16:29 KeepoN

Спасибо, что он работал на университетском сервере. Мне просто нужно установить php на моем компьютере. Большое спасибо моему другу. –

Добро пожаловать, всегда приятно помогать всем, кому нужна помощь. – KeepoN

И избавить его от беспокойства о сроках. Поистине оцененная помощь :) –

Давайте предположим, что вы храните то, что вы называете файл А в options.html, то мое предложение заключается в следующем:

«сценарий .js ":

// because you put your script in the <head> of B,C,D we wait for the page to load 
window.onload = function() { 
    // We locate the dropdown menu 
    var dropdownMenu = document.getElementById('dropdown'); 
    // load the file via XHR 
    loadHTML(function (response) { 
     // the response will be a string so we parse it into a DOM node 
     var parser = new DOMParser() 
     var doc = parser.parseFromString(response, "text/html"); 
     dropdownMenu.innerHTML = doc.getElementById('dropdown').innerHTML; 

     // in case you want to do something with the references to the .csv files 
     var csvFiles = doc.getElementsByTagName('script')[0]; 
     console.log(csvFiles); 

    }) 
}; 

function loadHTML(callback) { 
    var xobj = new XMLHttpRequest(); 
    xobj.overrideMimeType("text/html"); 
    xobj.open('GET', 'options.html', true); 
    xobj.onreadystatechange = function() { 
     if (xobj.readyState == 4 && xobj.status == "200") { 
      callback(xobj.responseText); 
     } 
    }; 
    xobj.send(null); 
}

Обратите внимание, что это выполняется только в том случае, если вы размещаете его на http-сервере. Другими словами, он не будет запускаться локально из-за политики одинакового происхождения.

Разбор строки для DOM был вдохновлен этим answer.

Загрузка файла HTML через XHR была вдохновлена этим post на codepen.

Я изменил свою версию B, C, D:

ссылку на script.js в голове-элементный
добавил Div-элемент с идентификатором "выпадающим меню"

источник

2015-09-02 21:43:58 fkneist

Поскольку использование php казалось работать (хотя я изначально хотел использовать только html или javascript, но казался простым таким образом), я буду придерживаться использования php в качестве KeepoN, упомянутого ниже. Спасибо за ответ и помощь @franzfridolin –

Включить javascript и html-код из другого файла

ответ

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