包含来自另一个文件的 javascript 和 html 代码答案

【问题标题】：Include javascript and html code from another file包含来自另一个文件的 javascript 和 html 代码
【发布时间】：2015-11-28 12:32:44
【问题描述】：

我有一个包含多个可视化的项目，所有这些都使用相同的下拉菜单来选择要加载的 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 代码这一事实有关，但我通常对此并不陌生，无法找到正确的方法。提前感谢您的帮助。

【问题讨论】：

您是否需要根据选择显示“csv”数据？或者加载 html/script，你的脚本存储在哪里？
我只需要加载脚本，就可以使用A文件中的代码了。使用 php 的答案刚刚在我的大学服务器上运行。现在我只需要在我的电脑上安装 php。感谢您提供。 @Klaujesi

标签： javascript html d3.js include code-reuse

【解决方案1】：

用 php 就完成了，这样调用它：

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

【讨论】：

感谢它在大学服务器上的工作。我现在只需要在我的电脑上安装 php。非常感谢我的朋友。
不客气，帮助任何需要帮助的人总是很高兴
让他免于对最后期限的焦虑。非常感谢您的帮助:)

【解决方案2】：

假设您将您称为文件 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-Server 上时才会运行。换句话说，由于同源策略，它不会在本地运行。

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

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

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

head-Element 中对 script.js 的引用
添加了一个 ID 为“dropdown”的 div 元素

【讨论】：

由于使用 php 似乎可以工作（虽然我最初只想使用 html 或 javascript，但这样看起来很简单）我将坚持使用 php，因为下面提到了 KeepoN。感谢您的回复和帮助@franzfridolin