我正在构建一个带有一些模式对话框窗口的小型应用程序。 Windows 需要一点点 HTML。我已经在 javascript 库中对窗口 HTML 进行了硬编码，但我对这个解决方案并不满意。有没有更优雅的方法来做到这一点？ JavaScript 似乎没有多行字符串/heredoc 语法。
var html = "<div id='email_window'><h2>Email Share</h2><div>";
html = html + "<form action='javascript:emailDone();' method='post'>";
html = html + "<div><label for='to'>To</label><input id='to' type='text'></div>";
html = html + "<div><label for='from'>From</label><input id='from' type='text' value='" + email + "'></div>";
html = html + "<div><label for='subject'>Subject</label><input id='subject' type='text' disabled='disabled' value='" + subject + "'></div>";
html = html + "<div><label for='body'>Body</label><input id='body' type='text' disabled='disabled' value='" + body + "'></div>";
html = html + "<div><input type='submit' value='Send'><input type='button' value='Cancel' onClick='javascript:$.fancybox.close();'></div>";
html = html + "</form></div>";
$("#data").html(html);
添加以澄清原始消息-
任何解决方案都不能使用 Ajax/XHR 来提取模板文件，因为 javascript 库将位于与其包含的 html 文件不同的域中 这有点像 ShareThis。该库将包含在许多不同的网站上，并附加到 div 内任何带有属性 sharetool="true"的 anchor 标记的 onClick 事件。
例如:
http://www.bar.com - index.html
<html>
...
<script type="text/javascript" src="http://www.foo.com/sharetool.js"></script>
...
<body>
<div sharetool="true">
</div>
...
</html>
最佳答案
您可以将 HTML 作为常规标记包含在页面末尾的不可见 div 内。然后您就可以使用 jQuery 引用它。
然后，您需要以编程方式设置变量字段(电子邮件、主题、正文)
<div id='container' style='display: none;'>
<div id='your-dialog-box-contents'>
...
...
</div>
</div>
<script type='text/javascript'>
$("#from").val(from);
$("#subject").val(subject);
$("#body").val(body);
$("#data").html($("#your-dialog-box-contents"));
</script>
关于javascript - 在 JavaScript 文件中包含 HTML 的优雅干净的方法？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/6192268/