包含其他文件中的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'); ?>

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

問題描述

2 個解決方案

解決方案1
1 2015-09-02 21:43:58

解決方案2
0 2015-09-02 21:16:29

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

問題描述

2 個解決方案

解決方案1 1 2015-09-02 21:43:58

解決方案2 0 2015-09-02 21:16:29

解決方案1
1 2015-09-02 21:43:58

解決方案2
0 2015-09-02 21:16:29