3

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

<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>

当我按下按钮时，我失去了彩色背景并出现了文本。有没有办法让背景保持不变并出现文字？

4

4 回答 4

3

是的，不使用document.write(). MDN 解释得很清楚：

在没有调用 document.open() 的情况下写入已经加载的文档将自动执行 document.open 调用。

关于document.open() 它说：

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

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

document.body.innerHTML += page;

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

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

在这两种情况下，当前文档都不会被刷新，它只会被修改。

于 2013-02-03T00:19:21.907 回答
1

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

您可以使用该document.createElement功能和document.appendChild函数来做到这一点。

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

http://www.dustindiaz.com/add-and-remove-html-elements-dynamically-with-javascript/

于 2013-02-03T00:18:45.350 回答
0

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

这也应该解决您的背景颜色问题。

这是一个带有示例的JS Fiddle 。

<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>

祝你好运。

于 2013-02-03T00:16:34.840 回答
0

正如 Mattias Buelens 解释的那样，document.write调用open清除 DOM 的方法只是因为 - 在加载后 - 该document.close方法是自动调用的。当然，您可以使用许多替代方案。例如，使用元素
的innerHTML属性。 使用and也是一种选择body
document.createElementdocument.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<9 上的内存泄漏，请查看此链接以获取此问题的解决方案

于 2013-02-03T00:42:20.513 回答