Javascript 使用“更新页面”；文件。写下“；删除格式_Javascript_Html

Javascript 使用“更新页面”；文件。写下“；删除格式

javascript html

Javascript 使用“更新页面”；文件。写下“；删除格式,javascript,html,Javascript,Html,我一直在想是否有办法防止我的函数隐藏任何当前的文本/格式 <body> <script type="text/javascript"> document.body.style.backgroundColor = "#F5F0EB"; var page = 0 function flip(){ document.write(page); page++; } </script> <input type=button value="Next" onClick=

我一直在想是否有办法防止我的函数隐藏任何当前的文本/格式

<body>
<script type="text/javascript">
document.body.style.backgroundColor = "#F5F0EB";
var page = 0
function flip(){
document.write(page);
page++;
}
</script>
<input type=button value="Next" onClick="flip()">
</body>


document.body.style.backgroundColor=“#F5F0EB”；
变量页=0
函数翻转（）{
文件。书写（第页）；
page++；
}

当我按下按钮时，彩色背景消失，文本出现。有没有一种方法可以使背景保持不变并显示文本

您正在将页面写入文档，而文档会覆盖整个HTML。相反，将内容写到DIV中

这也可以解决你的背景色问题

下面是一个例子

<script type="text/javascript">
document.body.style.backgroundColor = "#F5F0EB";
var page = 0
function flip(){
document.getElementById("contentgoeshere").innerHTML=page;
page++;
}
</script>
<input type=button value="Next" onClick="flip()">
<div id="contentgoeshere">
</div>


document.body.style.backgroundColor=“#F5F0EB”；
变量页=0
函数翻转（）{
document.getElementById（“contentGoesher”）.innerHTML=page；
page++；
}

祝你好运。

发生这种情况是因为你正在向一个应该是html的文档中写入非html。正如其他人所指出的，它也可能正在清除您现有的html。您可能希望在文档中附加新元素，而不是使用

document.write

您可以使用

document.createElement

函数和

document.appendChild

函数来实现这一点

以下是谷歌快速搜索带来的结果：

是，不使用

document.write（）

：

写入已加载的文档而不调用 document.open（）将自动执行document.open调用

关于

document.open（）

：

如果目标中存在文档，此方法将清除该文档

您应该做的是操作DOM中的节点。例如，您可以更改正文的内部HTML：

document.body.innerHTML += page;

或者，您可以创建一个文本节点并附加它：

var textNode = document.createTextNode(page);
document.body.appendChild(textNode);

在这两种情况下，都不会刷新当前文档，只会对其进行修改。

正如Mattias Buelens所解释的，

document.write

调用

open

方法，该方法会清除DOM，这仅仅是因为加载后会自动调用

document.close

方法。当然，您可以使用许多替代方案
例如，使用

body

元素的

innerHTML

属性。
使用

document.createElement

和

document.body.appendChild

也是一个选项

但也许值得考虑的是，这两种方法都有其缺点：使用

innerHTML

可以将格式不正确的标记注入DOM，并可能使您容易受到XSS攻击
使用

document.createElement

速度较慢（通常），通常需要更多的代码，这反过来会降低脚本的可维护性

您可以使用以下内容：

var flip = (function(tempDiv)
{//create a div once
    var page = 0,
    targetDiv = document.getElementById('contentgoeshere');//closure variables
    //page is now no longer an evil global, and the target element into which
    //we will inject new data is referenced, so we don't have to scan the DOM
    //on each function call
    return function(overridePage)//optional argument, just in case
    {//actual flip function is returned here
        overridePage = overridePage || page++;//new content
        tempDiv.innerHTML = overridePage;//render in div that isn't part of the DOM
        //any number of checks can go here, like:
        if (tempDiv.getElementsByTagName('script').length > 0)
        {
            alert('Naughty client, trying to inject your own scripts to my site');
            return;
        }
        targetDiv.innerHTML = tempDiv.innerHTML;
        //or, depending on your needs:
        targetDiv.innerHTML = tempDiv.innerText;//or the other way 'round
    };
}(document.createElement('div')));

两个旁注：就目前的情况而言，这个函数不起作用，因为必须完全加载DOM才能使闭包起作用。一个快速解决方案是：

var flip;//undefined
window.onload = function()
{
    flip = (function(tempDiv)
    {
        var page = 0,
        targetDiv = document.getElementById('contentgoeshere');
        return function(e)
        {
            tempDiv.innerHTML = e instanceof Event ? page++ : (e || page++);//ternary + logical or
            //your [optional] checks here
            targetDiv.innerHTML = tempDiv.innerHTML;
            if (e instanceof Event)
            {//this part is optional, but look it up if you want to: it's good stuff
                e.returnValue = false;
                e.cancelBubble = true;
                if (e.preventDefault)
                {
                    e.preventDefault();
                    e.stopPropagation();
                }
            }
            return e;
        };
    }(document.createElement('div')));
    //instead of using the HTML onclick attribute:
    document.getElementById('buttonID').onclick = flip;//use as event handler
};

请注意，

window.onload

会导致IE上的内存泄漏不要使用

document.write

在这种情况下我应该使用什么？

document.write