Question

我有一个JS文件，我想将HTML文件中的HTML代码放在JS文件中 - 这可能吗？目前，HTML代码在转义代码中被烘焙到JS文件中 - 例如例如：

"html": "<div class=\"slideTitleBase\" style=\"background-image:url(slides/_images/Title.jpg); background-size:cover;\"><div class=\"TitleLHS\"><h1>H1 Title</h1><h2>H2 Title</h2></div></div>"

对于人们来说，这很麻烦并且不容易编辑 - 因此我希望HTML内容在普通HTML中创建然后放入JS文件中，以便系统可以根据需要运行。

请尽可能告知？

e.g。如果我有一个名为“example.html”的HTML文件 - 我希望能够告诉这个JS文件 - 从“example.html”文件中提取原始HTML内容 - 那么example.html的内容将是：< / p>

<div class="slideTitleBase" style="background-image:url(slides/_images/Title.jpg); background-size:cover;"><div class="TitleLHS"><h1>H1 Title</h1><h2>H2 Title</h2></div></div>

Answer 1

以下是使用AJAX请求加载外部HTML的方法。

在jQuery中：

$.get("external.html").done(function(html) {
  document.write(html);
});

如果你要做很多这样的事情我强烈推荐jQuery，但如果你需要它，这里是vanilla javascript：

var request = new XMLHttpRequest();
request.onreadystatechange = function() {
    if (request.readyState === 4) {
        if (request.status === 200) {
            document.write(request.responseText);
        }
    }
};
request.open("GET", "external.html", true);
request.send(null);

Answer 2

您可以尝试在运行时异步加载文件。但是，Trick是必须重构代码以在加载数据时执行。

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
var myDataStructure = { };
function proceedWithPopulatedData () {
    alert('got html ' + myDataStructure.html);
}
$.ajax({
    url: 'foo.html',
    success: function (rawdata) {
        myDataStructure.html = rawdata;
        proceedWithPopulatedData();
    }
});


</script>
<head>
<body>

Answer 3

这是答案......在另一个StackOverflow帖子上找到它！

$.ajax({
    type: "POST",
    url:"example.html",
    data: "{}",
    async: true,
    dataType: "text",
    success: function( htmlContent ) {
        console.log(htmlContent);
    }
});

将外部doc中的HTML代码放入JS文件中

3 个答案: