Question

我有一个由多个可视化组成的项目，所有这些都使用相同的下拉菜单来选择要加载的csv。我希望能够添加一个新选项并在所有文件上进行更改。最好的方法是在一个文件中使用html和javascript代码，并将其包含在其他文件中，这样如果我想在下拉菜单中添加更多选项，我只能在该单个文件中执行此操作。有没有办法用html做到这一点，如果是这样，我是否必须改变可重复使用的布局＆＃34; A＆＃34;文件，以便在其余部分正确使用？如果用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

我们假设您在options.html中存储了您调用文件A的内容，然后我的建议如下：

＆＃34;的script.js＆＃34;：

// 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-Server上托管它时才会运行。换句话说，由于同源策略，它不会在本地运行。

将字符串解析为DOM的灵感来自于此answer。

通过XHR加载HTML文件的灵感来自代码集上的post。

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

引用head-Element
添加了一个带ID和＃34的div元素＆＃34;

Answer 2

用PHP完成就像这样称呼它：

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

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

2 个答案: