Javascript 将外部文档中的HTML代码放入JS文件_Javascript_Html

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

javascript html

Javascript 将外部文档中的HTML代码放入JS文件,javascript,html,Javascript,Html,我有一个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 Titl

我有一个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”：“H1标题h2标题”

这是混乱的，不太容易为人们编辑-因此，我想在正常的HTML中创建HTML内容，然后放入JS文件，以便系统可以运行所需的

如果可能，请告知

e、 g.如果我有一个名为“example.HTML”的HTML文件，我希望能够告诉这个JS文件，从“example.HTML”文件中提取原始HTML内容，那么example.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>

H1标题h2标题

下面介绍如何使用AJAX请求加载外部HTML

在jQuery中：

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

如果你打算经常做这些事情，我强烈推荐jQuery，但是如果你需要，这里有一些普通的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);

您可以尝试在运行时异步加载文件。不过，诀窍是，您必须重新构造代码，以便在加载数据时执行

<!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>


var myDataStructure={}；
函数proceedWithPopulatedData（）{
警报（'gotthtml'+myDataStructure.html）；
}
$.ajax({
url:'foo.html'，
成功：函数（rawdata）{
myDataStructure.html=rawdata；
proceedWithPopulatedData（）；
}
});

这就是答案。。。在另一个StackOverflow post上找到的

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

有许多不同的选择。您是否有特定的构建链/工具，或者JS是手工编码的？我不确定我是否理解。您能否澄清一下：您使用的是什么后端语言，如果有的话（php、.net等）？您是在使用JQuery还是使用其他前端库来使用此代码？更好的做法是，将HTML放入外部HTML文件中，并使用GET请求加载HTML。Dave-您可以提供一个GET请求示例吗？是否可以从文件异步获取HTML，或者您需要将HTML硬编码到JS中？如果是前者，则可以使用AJAX请求（例如）在JavaScript中，在运行时将文件作为字符串加载到数据结构中。谢谢-有没有可能是纯JS版本？也有没有可能是将external.html的html内容wirting到JS var中的示例？谢谢Dave-在jQuery示例中-html内容是否在您的示例中传递到var中？在jQuery中

.done

handler，我命名为

html

的变量可以命名为任何名称，并且可以像任何其他JS变量一样使用。您只需要记住，您现在正在使用AJAX，因此无法立即访问HTML变量，因此页面上需要它的其他脚本可能需要重新构造才能正常工作。如果您对此感到困惑，我建议您阅读Thank Dave-抱歉-这对我来说没有意义。谢谢-但我想将HTML内容从HTML文件调用到JS文件中。。。此解决方案不会执行此操作？您在此处使用的命令。