如何阻止 HTML 页面渲染,直到 JS 脚本完成

问题描述 投票:0回答:2

我使用网站构建器和类似于 Wordpress 的 CMS 构建了一个网站。我想在页面呈现之前运行一个脚本,看看是否需要将用户重定向到另一个页面。

目前,我在 head 标签中附加了一个 JS 脚本,当满足条件时逻辑工作正常。但是,有时初始页面可能会渲染不到一秒,然后就会重定向到更新的路径。

如何避免在这么短的时间内渲染此页面?我似乎找不到办法这样做。我尝试看看是否可以从 DOM 中删除整个主体,并在函数运行后将其添加回来,但我无法成功实现。

javascript html wordpress dom content-management-system
2个回答
0
投票

您可以做几件事,第一个是使用 DOMContentLoaded,这似乎是最有效的:

document.addEventListener('DOMContentLoaded', function() {
    // Your redirect logic
    if (someCondition) {
        window.location.href = 'https://www.example.com/new-location';
    }
});

这将等待文档准备好,然后您可以决定是否要显示内容或从此处重定向。

如果以上不满足您的需求,您还可以使用CSS将页面显示为none,然后实现您的重定向:

<head>
   <style>
       body {
           display: none;
       }
   </style>
   <script>
       // Your redirect logic
       if (someCondition) {
           window.location.href = 'https://www.example.com/new-location';
       } else {
           document.body.style.display = 'block';
       }
   </script>
</head>

除非您的条件为假,否则永远不会向用户显示页面正文。希望这有帮助!


0
投票

这可能对你有用:

document.addEventListener('DOMContentLoaded', function() {
   // your code here
}, false);
or if your comfort with jquery,

$(document).ready(function(){
    // your code
});

一些用于 jQuery

$(document).ready(function() {   //same as: $(function() { 
    // your code
});

$(window).load(function() {
    // your code
});
© www.soinside.com 2019 - 2024. All rights reserved.