$（document）.ready等同物，不带jQuery

我有一个使用$（document）.ready的脚本，但它不使用jQuery中的任何其他内容。我想通过删除jQuery依赖项来减轻它。

如何在不使用jQuery的情况下实现我自己的$（document）.ready功能？我知道，使用window.onload将不同，因为window.onlead在加载所有图像、帧等后启动。

当前回答

一旦DOM就绪，此跨浏览器代码将调用函数：

var domReady=function(func){
    var scriptText='('+func+')();';
    var scriptElement=document.createElement('script');
    scriptElement.innerText=scriptText;
    document.body.appendChild(scriptElement);
};

以下是它的工作原理：

domReady的第一行调用函数的toString方法，以获取传入函数的字符串表示形式，并将其包装在立即调用该函数的表达式中。domReady的其余部分使用表达式创建一个脚本元素，并将其附加到文档正文中。DOM就绪后，浏览器运行附加到主体的脚本标记。

例如，如果您这样做：domReady（function（）｛alert（）；｝）；，以下内容将附加到body元素：

 <script>(function (){alert();})();</script>

注意，这只适用于用户定义的函数。以下命令不起作用：domReady（警报）；

2014-12-27 16:52:42

其他回答

jQuery的回答对我很有用。经过一点重构，它很好地满足了我的需求。我希望这对其他人有所帮助。

function onReady ( callback ){
    var addListener = document.addEventListener || document.attachEvent,
        removeListener =  document.removeEventListener || document.detachEvent
        eventName = document.addEventListener ? "DOMContentLoaded" : "onreadystatechange"

    addListener.call(document, eventName, function(){
        removeListener( eventName, arguments.callee, false )
        callback()
    }, false )
}

2012-09-05 16:56:58

简而言之，我们可以使用JavaScript方法来代替jQuery中使用的$（document）.ready（）：

<script>
    document.addEventListener("DOMContentLoaded", function_name, false);
    function function_name(){
        statements;
    }
</script>

因此，当页面准备就绪（即DOMContentLoaded）时，将调用函数function_name（）。

2016-01-12 16:35:38

我只使用：

setTimeout(function(){
    //reference/manipulate DOM here
});

而且与上面的答案中的document.addEventListener（“DOMContentLoaded”//等不同，它的工作时间可以追溯到IE9——http://caniuse.com/#search=DOMContentLoaded仅表示最近的IE11。

有趣的是，我在2009年偶然发现了这个setTimeout解决方案：检查DOM的准备是否过度？，我的意思是“使用各种框架的更复杂的方法来检查DOM的就绪性是否过分”。

我对这种技术为什么有效的最好解释是，当使用这样一个setTimeout的脚本到达时，DOM正处于解析过程中，因此setTimeout中的代码的执行会延迟到该操作完成。

2017-10-25 01:42:59

现在你应该使用模块。将代码放入模块的默认函数中，并将该函数导入脚本元素。

客户端.js：

export default function ()
{
  alert ("test");
}

index.html：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>test</title>
  </head>
  <body>
    <script type="module">
      import main from './client.js';
      main ();
    </script>
  </body>
</html>

2020-11-21 17:57:13

这很好https://stackoverflow.com/a/11810957/185565穷人的解决方案。一条评论认为，这是在紧急情况下纾困的一种对策。这是我的修改。

function doTheMagic(counter) {
  alert("It worked on " + counter);
}

// wait for document ready then call handler function
var checkLoad = function(counter) {
  counter++;
  if (document.readyState != "complete" && counter<1000) {
    var fn = function() { checkLoad(counter); };
    setTimeout(fn,10);
  } else doTheMagic(counter);
};
checkLoad(0);

2013-10-03 09:12:53

$（document）.ready等同物，不带jQuery

推荐文章

最新文章

标签