Javascript 使用jQuery创建服务器端包含

我想使用jQuery创建服务器端包含，但我想创建一个方法，根据插入元素的“title”属性自动生成内容，例如：

<div class="js-include" title="nav.html"></div>
<div class="js-include" title="table.html"></div>

这样，一个脚本就可以用来生成多个内容元素

内容文件存储在与基础文件相同的文件夹中。下面是我尝试使用的脚本，但它不起作用：

<script>
$(".js-include").each(function(){
    var inc=$(this);
    $.get(inc.attr("title"), function(data){
        inc.replaceWith(data);
    });
});
</script>

$（“.js include”）.each（函数（）{
var inc=$（本）；
$.get（inc.attr（“title”）、函数（数据）{
替换为（数据）；
});
});

嗯，我想我明白你想做什么。您想使用jQuery加载nav.html并将其内容放入该div中吗

为什么不直接从服务器端执行呢？若那个些div是在服务器端创建的，那个么服务器在页面加载期间知道它们是需要的，并且可以只包含它们，而不是让JS来处理

我不知道如何使用jQuery加载nav.html，也许是一些AJAX/HTTP代码。但是，一旦在变量上有了它，就可以使用element.innerHTML将任何HTML文本存储到DOM元素中

但是，我不会让服务器设置特定的类并将数据添加到某些元素的标题属性中（当然，不考虑服务器端只处理include的更好方法），而是给这些元素一个id。然后，在HTML文档的底部，我会打印一个包含这些id的JSON数组以及如何处理它们（例如，要加载到其中的文件）

然后在一个JS文件中，我获取该数组，循环遍历它，并根据需要处理它的数据

编辑：我以前从未做过这样的事情，你必须运行它来测试任何sxyntax错误

<?php
$fileslinks = array(
    array(
        'id'        => 'id1',
        'filename'  => 'file1.html'
    ),
    array(
        'id'        => 'id2',
        'filename'  => 'file2.html'
    ),
    array(
        'id'        => 'id3',
        'filename'  => 'file3.html'
    )
);
?>

<div id='id1'></div>
<div id='id2'></div>
<div id='id3'></div>

<script>
    var fileslinks = <?php echo json_encude($fileslinks); ?>;

    fileslinks.forEach(printFiles);

function printFiles(element, index, array){
    var fileContent = // load from element.filename
    document.getElementById(element.id).innerHTML = fileContent;
}


if(!Array.prototype.forEach){
    Array.prototype.forEach = function(fun){
        var len = this.length;
        if(typeof fun != "function")
            throw new TypeError();

        var thisp = arguments[1];
        for(var i = 0; i < len; i++){
            if(i in this)
                fun.call(thisp, this[i], i, this);
        }
    };
}

</script>

var fileslinks=；
fileslinks.forEach（打印文件）；
函数打印文件（元素、索引、数组）{
var fileContent=//从元素加载。文件名
document.getElementById（element.id）.innerHTML=fileContent；
}
if（！Array.prototype.forEach）{
Array.prototype.forEach=函数（fun）{
var len=此长度；
如果（乐趣的类型！=“功能”）
抛出新的TypeError（）；
var thisp=参数[1]；
对于（变量i=0；i

嗯，我想我理解你想做什么。你想，使用jQuery，加载nav.html并将其内容放入该div中吗

为什么不直接从服务器端执行呢？如果这些div是在服务器端创建的，服务器在页面加载过程中知道它们是需要的，并且可以只包含它们，而不是让JS来处理

我不知道如何使用jQuery加载nav.html，可能是一些AJAX/HTTP代码。但一旦在变量上加载了nav.html，就可以使用element.innerHTML将任何html文本存储到DOM元素中

但是，我不会让服务器设置特定的类并将数据添加到某些元素的标题属性中（当然，不考虑服务器端只处理include的更好方法），而是给这些元素一个id。然后，在HTML文档的底部，我会打印一个包含这些id的JSON数组以及如何处理它们（例如，要加载到其中的文件）

然后在一个JS文件中，我获取该数组，循环遍历它，并根据需要处理它的数据

编辑：我以前从未做过这样的事情，你必须运行它来测试任何sxyntax错误

<?php
$fileslinks = array(
    array(
        'id'        => 'id1',
        'filename'  => 'file1.html'
    ),
    array(
        'id'        => 'id2',
        'filename'  => 'file2.html'
    ),
    array(
        'id'        => 'id3',
        'filename'  => 'file3.html'
    )
);
?>

<div id='id1'></div>
<div id='id2'></div>
<div id='id3'></div>

<script>
    var fileslinks = <?php echo json_encude($fileslinks); ?>;

    fileslinks.forEach(printFiles);

function printFiles(element, index, array){
    var fileContent = // load from element.filename
    document.getElementById(element.id).innerHTML = fileContent;
}


if(!Array.prototype.forEach){
    Array.prototype.forEach = function(fun){
        var len = this.length;
        if(typeof fun != "function")
            throw new TypeError();

        var thisp = arguments[1];
        for(var i = 0; i < len; i++){
            if(i in this)
                fun.call(thisp, this[i], i, this);
        }
    };
}

</script>

var fileslinks=；
fileslinks.forEach（打印文件）；
函数打印文件（元素、索引、数组）{
var fileContent=//从元素加载。文件名
document.getElementById（element.id）.innerHTML=fileContent；
}
if（！Array.prototype.forEach）{
Array.prototype.forEach=函数（fun）{
var len=此长度；
如果（乐趣的类型！=“功能”）
抛出新的TypeError（）；
var thisp=参数[1]；
对于（变量i=0；i

尝试将代码包装在

$（document）.ready（）中

<script type="text/javascript>
$(document).ready(function(){
    $(".js-include").each(function(){
        $(this).load($(this).attr("title"));
    });
});
</script>

尝试将代码包装在
$（document）.ready（）中

<script type="text/javascript>
$(document).ready(function(){
    $(".js-include").each(function(){
        $(this).load($(this).attr("title"));
    });
});
</script>

我可能会建议您使用data-*属性，而不是title=“…”。我认为这里更有意义。此外，您不需要替换，甚至不需要获取，jquery有一个ajax重载来帮助您

<div class="js-include" data-page="nav.html"></div>
<script>
$(function () {
    $(".js-include").each(function () {
        $(this).load($(this).data('page'));
    });
});
</script>


$（函数（）{
$（“.js include”）.each（函数（）{
$（this.load（$（this.data（'page'））；
});
});
我可能会建议您使用data-*属性，而不是title=“…”。我认为这里更有意义。此外，您不需要替换，甚至不需要获取，jquery有一个ajax重载来帮助您

<div class="js-include" data-page="nav.html"></div>
<script>
$(function () {
    $(".js-include").each(function () {
        $(this).load($(this).data('page'));
    });
});
</script>


$（函数（）{
$（“.js include”）.each（函数（）{
$（this.load（$（this.data（'page'））；
});
});
js必须在html的末尾，如果ajax是正确的，它将工作js必须在html的末尾，如果ajax是正确的，它将工作不仅使用
data-
更有意义，
title
也在
div
s上创建。非常好的主意。你的答案很好。我喜欢使用不同属性的建议。好的，在t之后在实际站点上尝试此方法时，我们遇到了一个重大意外后果。脚本肯定会加载外部内容，但随后会导致浏览器忽略网页的所有其余部分！您可以在此URL上找到一个示例：我禁用了页面上的所有其他脚本，以查看是否存在任何冲突，但仍然无法加载页面的其余部分。有什么想法吗？不仅使用
数据-
更有意义，
标题
也在
div
上创建。非常好的想法。你的答案很好。我喜欢使用不同属性的建议。好吧，在实际站点上尝试此方法后，我们遇到了一个重大意外后果。script肯定会加载外部内容，但随后会导致浏览器忽略所有其他内容