(转)利用document.write输出静态HTML（无乱码） - [JavaScript]

最新推荐文章于 2024-01-30 23:08:54 发布
最新推荐文章于 2024-01-30 23:08:54 发布
阅读量304 收藏
点赞数
CC 4.0 BY-SA版权
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/cyrix/articles/2160628.html
本文介绍了一种利用JavaScript动态更新静态HTML页面内容的方法，通过定义变量并使用document.write()函数，可以在不重新生成整个静态页面的情况下，仅修改特定部分的内容。此技巧适用于动态网页全站静态化后，需要调整布局时的场景。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

 今天我研究腾讯网代码时发现一段有用的代码，在此贴出来供大家使用和借鉴，代码的功能主要是用JavaScript的document.write方法输出静态的HTML内容代码，代码如下：


<script language="javascript">
String.prototype.escNone=function(){return this.toString()};

var strHtml='<div class="footer" id="copyright"><p class="footermenu"><a target="_blank" href="http://www.tencent.com/">关于腾讯</a> | <a target="_blank" href="http://www.qq.com/contract.shtml">服务条款</a> | <a target="_blank" href="http://adver.qq.com/">广告服务</a> | <a target="_blank" href="http://hr.tencent.com/">腾讯招聘</a> | <a target="_blank" href="http://service.qq.com/">客服中心</a> | <a target="_blank" href="http://www.qq.com/map/">网站导航</a></p></div>';
document.write(strHtml.escNone());
</script>


一些网站如果动态网页做了全站静态生成以后，如果想改动网页的一些布局，例如想更改导航栏或友情链接，在后台修改以后都需要整站全部静态化，使用上述JS语句代码放在*.JS文件里，引用至HTML文档或模版页面里，如果静态页面生成以后想修改局部内容，就可以修改JS文件，HTML页面自动更新，怎么样不错吧，还不马上来测试一下，挺好的，呵呵，常来http://azfly.cn转转，一定有你想要的程序代码！

我看到有些程序员使用document.write("<a href=\"#\">aa<\/a>")这种形式做更新静态输出，使用很多“\”，都不如以上代码来的省事一些！

以上JS代码只适用于输入静态的HTML， 如果在输出的代码中存在JS脚本，那么一定要使用转义符“\”使JS中的特殊字符“'”，“"”，“\”，“/”原样输出。否则程序将报错，一定要注意！

建议：代码使用在频繁更新的模块里，注意定义的变量代码的正确与否

http://azfly.cn/logs/22/72.html

转载于:https://www.cnblogs.com/cyrix/articles/2160628.html

Node.js | 搭建后端服务器（含内置模块 http | url | querystring 的使用）
前端之行，任重道远！
08-21 1万+
通过使用NodeJs的内置模块http快速搭建一个node后端服务器，并使用内置模块url等扩展其功能：实现后端路由、将node作为中间层使用、使用node实现爬虫
HTML中文乱码问题及解决方法
2301_79330511的博客
09-27 1994
在编写HTML页面时，有时会遇到中文乱码的问题，即中文字符无法正确显示。在HTML文档的头部，通过设置正确的字符编码来解决中文乱码问题。如果你的网站是托管在服务器上的，还需要确保服务器的配置正确。通常情况下，服务器会默认使用UTF-8编码，但有时会出现配置错误导致中文乱码的问题。如果以上方法无法解决中文乱码问题，可以使用HTML实体编码来显示中文字符。通过将中文字符转换为对应的HTML实体编码，可以避免中文乱码问题。通过以上的解决方法，你应该能够解决HTML中的中文乱码问题。
document.write直接写入 HTML 输出流
muzhili的专栏
04-28 7686
JavaScript 能够直接写入 HTML 输出流中：   document.write("这是一个标题"); document.write("这是一个段落。");   您只能在 HTML 输出流中使用 document.write。 如果您在文档已加载后使用它（比如在函数中），会覆盖整个文档。       您只能在 HTML 输出中使用docum
html在指定位置输出,document.write()和document.writeln()的区别及向指定位置写html
weixin_39846289的博客
06-04 3122
一、document.write()和document.writeln()的区别解决思路：两者都是JavaScript向客户端输出的方法，对比可知写法上的差别是一个ln--line的简写，换言之，writeln方法是以行输出的，相当于在?winte?输出后加上一个换行符。注意：document.write方法可以用在两方面:在网页载入过程中用实时脚本创建网页内容以及用延时脚本创建本窗口或新窗口的内...
js 写入 HTML 输出 采用 document.write
有一颗前端心的后端开发小哥
06-04 611
js 写入html结构输出 采用 document.write代码实例运行结果 看到这两行代码，还是感觉很新鲜。一般情况下都是采用html的方式书写页面结构。现在采用js写入html，喜欢的小伙伴，点赞哈。么么哒 代码实例 document.write("<h1>This is a heading</h1>"); document.write("<p>This is a paragraph</p>"); 运行结果 ...
document对象改变HTML
weixin_46990454的博客
12-16 919
使用document对象改变HTML输出流 JavaScript中的document对象能够动态的创建HMTL内容。document.write()方法可用于直接向HTML的输出流写内容。 <body> <script type="text/javascript"> var time = new Date(); var day = time.Date(); document.write("今天是当前月的第" + day + "天"); </script>
js在html页面循环输出html标签,JavaScript中使用document.write向页面输出内容实例
weixin_39524882的博客
06-03 1405
document.write 命令向页面输出文字本实例使用 JavaScript 的 document.write 命令向页面输出指定的文字，代码如下：document.write("我是向页面输出的文字！");将上面部分代码，用文本编辑器保存为 write.html(或 write.htm)。双击 write.html 运行它(实际是使用 IE 等浏览器打开这个文件)，会看到页面显示如下文字：我...
JavaScript字符串对象fromCharCode方法入门实例（用于把Unicode值转换为字符串）
10-25
document.write(String.fromCharCode(106,98,53,49).toLowerCase()); ``` 在这段代码中，我们使用fromCharCode方法将Unicode值106、98、53和49转换成字符，然后拼接成字符串。最后，通过toLowerCase方法将得到的...
net webform开发中常遇到的问题1
08-08
- 方法三：在后台设置JavaScript变量的值，例如`Response.Write("<script language='javascript'>var temp='" + tmp + "'</script>");`，然后在JS中访问`temp`。 4. C#访问JavaScript的已有变量： - 方法一：使用...
【NodeJS】005- NodeJS的NVM与express框架
weixin_65251013的博客
01-30 1287
express 是一个基于 Node.js 平台的极简、灵活的 WEB 应用开发框架，官方网址： https://www.expressjs.com.cn/简单来说，express 是一个封装好的工具包，封装了很多功能，便于我们开发 WEB 应用(HTTP 服务)官方定义： 路由确定了应用程序如何响应客户端对特定端点的请求中间件(Middleware) 本质是一个回调函数中间件函数 可以像路由回调一样访问请求对象（request） 响应对象(response)每一个请求到达服务端之后。
MySQL、JDBC、HTML、CSS、JavaScript、jQuery、tomcat、Http、Servlet、JSP、EL、JSTL、Maven、Cookie、Session（框架第一部分）
wrh0740的博客
07-10 5349
第一章 MySQL 1. 数据库 1、什么是数据库？ 所谓的数据库就是指存储和管理数据的仓库 2、数据库有哪些分类？ 3、什么是关系型数据库？ 底层以二维表的形式保存数据的库就是关系型数据库 stu-学生表 4、常见的关系型数据库有哪些？ Sql Server：微软提供，收费，适用于一些中型或大型的项目中，在java中的使用占比不高（.NET中使用的较多） Oracle：甲骨文公司提供，收费，适用于一些大型或者超大型的项目中，在java中的使用占比非常高 mysql：瑞典MySQLAB公司提
document.write()怎么样支持html,如何使用document.write（）方法写入当前html页面？
weixin_42429120的博客
06-16 1621
我在javascript中使用document.write()方法来填充点击按钮后的一些数据(在表中)。 但是，当我点击它在新页面中填充的按钮。 因为我的要求是，当我点击加号时，它应该显示树形或结构浏览器下方的连接对象。所以我的代码， 而且我的JavaScript的方法是：function PopulateData(){ // alert("hello");document.write("22Pa...
您只能在 HTML 输出中使用 document.write。如果您在文档加载后使用该方法，会覆盖整个文档。
x_z_z_的博客
12-11 144
您只能在 HTML 输出中使用 document.write。如果您在文档加载后使用该方法，会覆盖整个文档。 这句话是自学JavaScript时，在菜鸟教程中看到的， (https://www.runoob.com/js/js-intro.html) 起初我对这句话是不了解的，后来看了几个博客就明白了。 <!-- 文档加载完成前 --> <p> JavaScript 能够直接写入 HTML 输出流中： </p> <scrip
document创建一段html代码,代码生成器 document.write()
weixin_35075740的博客
06-05 474
HTMLPUBLIC"-//W3C//DTDHTML4.0Transitional//EN">代码转换器BODY{MARGIN-TOP:24px;BACKGROUND-COLOR:white}H1{FONT:20px黑体,宋体;COLOR:black;TEXT-ALIGN:center}H1SPAN{FONT:bold16pxVerdana,Aria...
使用document.write()输出覆盖HTML问题
Jie__CU的博客
07-09 6535
在W3School的JavaScript教程中有这样一个警告：         请使用 document.write() 仅仅向文档输出写内容。         如果在文档已完成加载后执行 document.write，整个 HTML 页面将被覆盖： 示例代码是这样的： My First Web Page My First Paragraph. 点击
02document write写入html文档
wwwshengbo的博客
01-11 531
&lt;script type="text/javascript"&gt;   &lt;!-- --&gt; &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;p&gt; 我是JavaScript 写入文档的p 标签&lt;/p&gt; &lt;script type="text/javascript&quot
去掉你代码里的 document.write("<script...
weixin_34387468的博客
09-18 2016
在传统的浏览器中，同步的 script 标签是会阻塞 HTML 解析器的，无论是内联的还是外链的，比如： &lt;script src="a.js"&gt;&lt;/script&gt; &lt;script src="b.js"&gt;&lt;/script&gt; &lt;script src="c.js"&gt;&lt;/script&g
解决HTML中文乱码问题
qq_41870790的博客
10-28 1267
学习前端知识的时候遇到了中文乱码问题 检查代码发现并没有问题 charset=“utf-8” <!DOCTYPE HTML> <html > <head> <meta http-equiv="Content-Type" content="text/html; charset="utf-8" /> <title>流程控制语句</ti...
html2pdf 空白一页
最新发布
03-25
### 解决HTML转PDF时出现空白页的问题 当尝试将HTML页面转换为PDF文件时，如果遇到空白页的情况，可能由多种原因引起。以下是可能导致此问题的原因以及相应的解决方案： #### 可能原因及解决方法 1. **CSS样式冲突** 如果HTML文档中的某些CSS样式未被正确解析或应用，则可能会导致内容无法正常显示在PDF中。例如，在某些情况下，`display: none;` 或 `visibility: hidden;` 的属性会隐藏部分内容[^1]。 - 确保移除任何不必要的隐藏样式。 - 使用工具调试并验证最终渲染效果。 2. **JavaScript执行失败** 部分HTML页面依赖于动态加载的内容（通过JavaScript实现）。然而，许多PDF生成库并不支持完全运行JavaScript逻辑。这可能是造成空白页的主要原因之一[^2]。 - 尝试禁用JavaScript功能以查看是否有影响。 - 提前预处理HTML页面，确保所有动态内容已静态化后再进行转换。 3. **外部资源加载失败** PDF生成器可能无法访问网络上的图片、字体或其他外部资源。这种情况下，即使HTML本身无误，也可能因为缺少这些资源而显得为空白页[^3]。 - 检查HTML源码中是否存在指向不可达URL的链接。 - 转换之前下载所有必要的外部资产并将它们嵌入到本地环境中。 4. **编码错误** 不同平台之间的字符集差异有时也会引发意外行为。比如UTF-8编码下的特殊字符未能妥善处理就容易出现问题。 - 明确指定HTML头部meta标签内的charset参数值应设为utf-8。 - 对敏感数据做适当转义操作以防乱码现象发生。 5. **软件版本兼容性** 所使用的abcpdf等第三方组件可能存在特定版本间的不一致表现。旧版程序或许不具备新特性或者修复过的漏洞。 - 更新至最新稳定发行版试试看能否解决问题。 - 查阅官方文档了解各版本间的变化记录以便调整策略。 ```python from io import BytesIO import weasyprint def html_to_pdf(html_content): document = weasyprint.HTML(string=html_content) output_buffer = BytesIO() document.write_pdf(target=output_buffer) return output_buffer.getvalue() # Example usage: if __name__ == "__main__": sample_html = """ <!DOCTYPE html> <html lang="en"> <head><title>Test Page</title></head> <body>Hello World!</body> </html> """ result = html_to_pdf(sample_html) with open('output.pdf', 'wb') as f: f.write(result) ``` 上述Python脚本展示了如何利用WeasyPrint库来完成简单的HTML到PDF转换过程。它可以帮助开发者快速测试不同输入条件下的输出质量，并据此优化原始素材结构直至满足需求为止。 ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值