document.body.innerHTML = "" 是否清除网页?

发布于 2024-08-21 20:11:54 字数 634 浏览 3 评论 0 原文

当我在 FF 3.0 中刷新下面的页面时,我希望网页能够清除,但事实并非如此。

为什么 document.body.innerHTML = "" 不清除页面?

更新: 我试图在加载新页面时刷新期间清除上一个屏幕。我实际上想看到页面清晰,等待,然后运行下一个js。我不想在页面加载后清除屏幕。

...
<body>
    <script type="text/javascript">
        document.body.innerHTML = "";
        for (var i = 0; i < 1000000000; i++) {
        }
    </script>

    <img src="images/web.gif" /><br />

    <script type="text/javascript">
        document.write( "hello<br />");
    </script>

    <img src="images/warning.png" /><br />

</body>

When I refresh the page below in FF 3.0, I expected the web page to clear but it didn't.

Why doesn't document.body.innerHTML = "" clear the page?

UPDATE:
I am trying to clear the previous screen during a refresh while the new page is loading. I actually want to see the page clear, wait and then the next js running. I don't want to clear the screen after the page has loaded.

...
<body>
    <script type="text/javascript">
        document.body.innerHTML = "";
        for (var i = 0; i < 1000000000; i++) {
        }
    </script>

    <img src="images/web.gif" /><br />

    <script type="text/javascript">
        document.write( "hello<br />");
    </script>

    <img src="images/warning.png" /><br />

</body>

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(7

唯憾梦倾城 2024-08-28 20:11:54

document.body.innerHTML = ''; 确实清除了body,是的。但它会清除代码运行时的 innerHTML 。当您在图像和脚本实际位于 body 中之前运行代码时,它会尝试清除 body,但没有任何内容需要清除。

如果要清除body,则必须在body填充内容后运行代码。您可以通过将

document.body.innerHTML = ''; does clear the body, yeah. But it clears the innerHTML as it is at the moment the code is ran. As you run the code before the images and the script are actually in the body, it tries to clear the body, but there's nothing to clear.

If you want to clear the body, you have to run the code after the body has been filled with content. You can do this by either placing the <script> block as the last child of body, so everything is loaded before the code is ran, or you have to use some way to listen to the dom:loaded event.

葬﹪忆之殇 2024-08-28 20:11:54

要详细说明 Douwem 的答案,请在脚本标记中将代码放入 onload 中:

<script type="text/javascript">
    window.onload=function(){
       document.body.innerHTML = "";
    }
</script>

To expound on Douwem's answer, in your script tag, put your code in an onload:

<script type="text/javascript">
    window.onload=function(){
       document.body.innerHTML = "";
    }
</script>
记忆で 2024-08-28 20:11:54

虽然同意 Douwe Maan 和 Erik 的答案,但这里还有一些其他内容可能对您有用。

首先,在 head 标签中,您可以引用一个单独的 JavaScript 文件,然后该文件是可重用的:

<script language="JavaScript" src="/common/common.js"></script>

其中 common.js 是名为 common 的顶级目录中的可重用函数文件。

其次,您可以使用setTimeout延迟脚本的操作,例如:

setTimeout(someFunction, 5000);

第二个参数以毫秒为单位。我提到这一点是因为您似乎试图延迟原始代码片段中的某些内容。

Whilst agreeing with Douwe Maan and Erik's answers, there are a couple of other things here that you may find useful.

Firstly, within your head tags, you can reference a separate JavaScript file, which is then reusable:

<script language="JavaScript" src="/common/common.js"></script>

where common.js is your reusable function file in a top-level directory called common.

Secondly, you can delay the operation of a script using setTimeout, e.g.:

setTimeout(someFunction, 5000);

The second argument is in milliseconds. I mention this, because you appear to be trying to delay something in your original code snippet.

物价感观 2024-08-28 20:11:54

正如其他人所说,一个简单的解决方案是将脚本放在页面底部,因为所有 DOM 元素都是从上到下同步加载的。否则,我认为您要寻找的是 document.onload(() => {callback_body})window.onload(() => {callback_body}) 正如埃里克所说。正如 Douwe Maan 所说,这些允许您在触发 dom:loaded 事件时执行脚本。不确定 window.onload 的属性,但 document.onload 仅在所有元素、css 和脚本加载后才会触发。对于您的情况:

<script type="text/javascript">
    document.onload(() =>
        document.body.innerHTML = "";
    )
</script>

或者,如果您使用的是旧浏览器:

<script type="text/javascript">
    document.onload(function() {
        document.body.innerHTML = "";
    })
</script>

As others were saying, an easy solution is to put your script at the bottom of the page, because all DOM elements are loaded synchronously from top to bottom. Otherwise, I think what you're looking for is document.onload(() => {callback_body}) or window.onload(() => {callback_body}) as Erik said. These allow you to execute you script when the dom:loaded event is fired as Douwe Maan said. Not sure about the properties of window.onload, but document.onload is triggered only after all elements, css, and scripts are loaded. In your case:

<script type="text/javascript">
    document.onload(() =>
        document.body.innerHTML = "";
    )
</script>

or, If you are using an old browser:

<script type="text/javascript">
    document.onload(function() {
        document.body.innerHTML = "";
    })
</script>
慢慢从新开始 2024-08-28 20:11:54

我不确定你想要实现什么,但你可能想考虑使用 jQuery,它允许你将代码放在 head 标签或单独的脚本文件中,并且在 DOM 加载后仍然执行代码。

然后,您可以执行以下操作:

$(document).ready(function() {
$(document).remove();
});

以及有选择地删除元素(所有 DIV、仅具有某些类的 DIV 等)

I'm not sure what you're trying to achieve, but you may want to consider using jQuery, which allows you to put your code in the head tag or a separate script file and still have the code executed after the DOM has loaded.

You can then do something like:

$(document).ready(function() {
$(document).remove();
});

as well as selectively removing elements (all DIVs, only DIVs with certain classes, etc.)

梦魇绽荼蘼 2024-08-28 20:11:54

使用 document.body.innerHTML = ''; 确实有效!只是说,如果使用 HTMLDOM 或在 function 上),您可以使用
document.writeln(''); 但只有 onClickonDoubleClick :)

Using document.body.innerHTML = ''; does work! Just saying, if using HTML (DOM or on function) you can use
document.writeln(''); but only onClick or onDoubleClick :)

梦在深巷 2024-08-28 20:11:54

我使用以下功能清除屏幕

var clear_body = function (){
    var lista = document.body.childNodes;
    for (var i = lista.length - 1; i >= 0 ;i--){
        document.body.removeChild(lista[i])
    }
}

I clear my screen using is function that

var clear_body = function (){
    var lista = document.body.childNodes;
    for (var i = lista.length - 1; i >= 0 ;i--){
        document.body.removeChild(lista[i])
    }
}
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文