如何在 JS 中嵌入 HTML 代码
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何在 JS 中嵌入 HTML 代码相关的知识，希望对你有一定的参考价值。
大段的 html 嵌入到 JS 里结果就是悲剧。不能代码高亮不能自动缩进，太难维护了。我的经验是，直接把 HTML 单独写到一个浏览器能访问到的文件里，比如 template/foo.html。然后 JS 里发一个同步 XHR 请求去读这个文件，例如：
var html = Template.load(\'/template/foo.html\');
var target = document.getElementById(\'xxx\');
target.innerHTML = html;
Template 是一个工具类，负责发送同步 XHR 请求并返回结果。
这样在开发的时候，模板文件和 JS 代码分离，非常好维护。
当然这样做的话，上线的时候总发 XHR 请求也不是办法。所以在打包 JS 之前，我一般会通过脚本把所有的 Template.load(\'.*\') 提取出来，替换成对应 HTML 的内容。这样在开发时非常方便，上线时也没有性能问题。
比如上面的代码被打包工具跑一下就变成了：
var html = "
- \\n...\\n
var target = document.getElementById(\'xxx\');
target.innerHTML = html; 参考技术A
思路，在JS中定义要嵌入的html代码，然后通过js进行嵌入即可。
<html><head>
<script>
function insert()
'定义代码
var insertText = "<table><tr><td>any thing</td></tr></table>";
’从html的标签中取得要插入的id进行innerHTML
document.getElementById("insert").innerHTML = document.getElementById("insert").innerHTML+insertText;
</script>
</head>
<body>
<button onclick="insert()">Insert</button>
<div id="insert"></div>
</body>
</html>
innerHTML在JS是双向功能：获取对象的内容 或 向对象插入内容；如：<div id="aa">这是内容</div> ，可以通过 document.getElementById('aa').innerHTML 来获取id为aa的对象的内嵌内容；也可以对某对象插入内容，如 document.getElementById('abc').innerHTML='这是被插入的内容'; 这样就能向id为abc的对象插入内容。
参考技术B在需要的位置加上js标签用document.write输出字符串
<script>document.write('<p>colour1: ' + colour1 + '<br>colour2: ' + colour2
+ '</p>');
</script>
如何获取嵌入在 PhantomJS 运行的 JS 的 HTML 页面结果中的 JSON 对象并将它们传递给 java 代码？
【中文标题】如何获取嵌入在 PhantomJS 运行的 JS 的 HTML 页面结果中的 JSON 对象并将它们传递给 java 代码？【英文标题】：How to get JSON objects embedded in HTML page result of JS running by PhantomJS and pass them to java code? 【发布时间】：2017-05-22 01:56:12 【问题描述】：我使用this answer 中描述的JS 脚本代码，但我不想将html 结果页面保存在html 文件中。我想从<div class="rg_meta"> 中提取 Json 对象并将它们传递给 Java 代码。
在搜索中，我发现使用“文档”，但出现未定义的错误。我是 PhantomJS 的新手，在 Java 中使用 JSON。
var page = require('webpage').create();
var fs = require('fs');
var system = require('system');
var url = "";
var searchParameter = "";
var count=0;
if (system.args.length === 4)
url=system.args[1];
searchParameter=system.args[2];
count=system.args[3];
if(url==="" || searchParameter==="")
phantom.exit();
page.settings.userAgent = 'Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/37.0.2062.120 Safari/537.36';
page.zoomFactor = 0.1;
page.viewportSize =
width: 1920,
height: 1080
;
var divCount="-1";
var topPosition=0;
var unchangedCounter=0;
page.open(url, function(status)
console.log("Status: " + status);
if(status === "success")
window.setInterval(function()
var newDivCount = page.evaluate(function()
var divs = document.querySelectorAll(".rg_di.rg_bx.rg_el.ivg-i");
return divs[divs.length-1].getAttribute("data-ri");
);
topPosition = topPosition + 1080;
page.scrollPosition =
top: topPosition,
left: 0
;
if(newDivCount===divCount)
page.evaluate(function()
var elems=document.getElementByClassName("rg_meta");
console.log(elems.length);
var button = document.querySelector("#smb");
if(!(typeof button === "undefined"))
button.click();
console.log('Clicked');
return true;
else
return false;
);
if(parseInt(unchangedCounter,10) === parseInt(count,10))
/* var path = searchParameter+'.html';
fs.write('seedHtml/'+path, page.content, 'w');
console.log('printing html');*/
phantom.exit();
else
unchangedCounter=unchangedCounter+1;
else
unchangedCounter=0;
divCount = newDivCount;
, 500);
else
phantom.exit();
);
【问题讨论】：
没有名为document.getElementByClassName的函数。它实际上是document. getElementsByClassName（Elements，而不是Element）。我认为这就是为什么您会收到 undefined 错误。你可以试试这个吗？
非常感谢，它不返回错误，它现在返回 0 结果。
好的，现在你可以使用console.log(elems[0])来打印它的内容了。然后你可以在 Java 代码或其他地方使用它，我想。
div元素可以使用数据属性，请到sitepoint.com/use-html5-data-attributes看看
【参考方案1】：
HTML5 数据属性
幸运的是，HTML5 引入了自定义数据属性。
<div id="msglist" data-user="bob" data-list-size="5" data-maxage="180"></div>
自定义数据属性：
是字符串 - 您可以存储任何可以字符串编码的内容，例如 JSON。 类型转换必须在 JavaScript 中处理。 只有在不存在合适的 HTML5 元素或属性时才应使用。
JavaScript 解析 #1：
每个浏览器都允许您使用 getAttribute 和 setAttribute 方法获取和修改数据属性，例如
var msglist = document.getElementById("msglist");
var show = msglist.getAttribute("data-list-size");
msglist.setAttribute("data-list-size", show+3);
它可以工作，但只能用作旧浏览器的后备。
JavaScript 解析 #2：
从 1.4.3 版本开始，jQuery 的 data() 方法已经解析了 HTML5 数据属性。您无需指定 data- 前缀，因此可以编写等效代码：
var msglist = $("#msglist");
var show = msglist.data("list-size");
msglist.data("list-size", show+3);
希望对你有帮助！！！
【讨论】：
以上是关于如何在 JS 中嵌入 HTML 代码的主要内容，如果未能解决你的问题，请参考以下文章
如何获取嵌入在 PhantomJS 运行的 JS 的 HTML 页面结果中的 JSON 对象并将它们传递给 java 代码？