包含其他文件中的javascript和html代码

Question

我有一个包含多个可视化项目的项目，所有项目都使用相同的下拉菜单选择要加载的csv。 我希望能够一次添加新选项并在所有文件上进行更改。 最好的方法是在一个文件中使用html和javascript代码，然后将其包含在其他文件中，因此，如果我想在下拉菜单中添加更多选项，则只能在该文件中执行。 有没有办法用html做到这一点，如果可以，我是否必须更改可重复使用的“ A”文件的布局，以便在其余文件中正确使用它？ 如果使用html无法实现，那么最好的方法是什么，我必须对文档的代码布局进行哪些更改？
这是必须在文件A上的可重用代码：

<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代码有关，但是我对此并不陌生，无法找到正确的方法。 在此先感谢您的帮助。

Answer 1

假设您将称为文件A的文件存储在options.html中，那么我的建议如下：

“ script.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的灵感来自此答案 。

通过XHR加载HTML文件的灵感来自于Codepen上的这篇文章 。

我修改了您的B，C，D版本：

• 在head-Element中引用script.js

• 添加了ID为“下拉”的div元素

Answer 2

用php完成，只需像这样调用它：

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