标签: document-ready

有没有办法让你的函数作为$(document).ready()队列中的最后一个被调用,或者有没有办法在完成后触发事件？

我想基本上看看是否有东西被发射$(document).ready(),如果没有,在病房之后开火.如果我将此代码放入文档准备就绪,则无法保证它将最后执行,因此可能导致多次检查.

我试图在之前使用以下代码获取元素宽度 </body>

<script type="text/javascript" charset="utf-8">
    $(document).ready(function(){
        var diff = $('div.canvas img.photo').get(1).width;
        console.log(diff);
    });
</script> 

但它记录未定义.但是,如果我$('div.canvas img.photo').get(1).width直接在Chrome/Firebug控制台中运行,则会返回正确的宽度.图像没有加载Javascript,因此应该在文档准备好时触发.我究竟做错了什么？

我们假设我有一个包含javascript文件的HTML页面:

base.js是这样的:

$(document).ready(function () {
   obj.init();
}

// ..............

var obj = {...};

令人惊讶的是,有时(并非所有时间)Firebug都会在obj.init()通话时向我显示未定义的错误!我的理解是文档就绪意味着所有html元素,包括图像,javascript文件下载和执行(？).

我相信为了找到这个错误的根本原因,我们需要了解"文件就绪"究竟是什么意思？有谁有洞察力？

============================

更新:也许我不应该在这里提到图像,我主要关心的是javascript文件."完全构建DOM"是否包含"所有执行的javascript代码"？

============================

再次更新:似乎人们同意在所有javascript代码下载并执行之前不会触发事件"document.ready".因此,问题的根本原因仍然未知.我将$(document).ready块移动到javascript文件的底部后,我绕过了这个问题.

我只是有一个关于在jQuery中编写函数的问题.在定义自己的函数时,它们应该写在内部$(function(){});还是外部？请注意,这些只是示例功能,可以是任何东西.我选择了一个jQuery函数和一个原生JavaScript来查看是否存在任何差异,即应该在文档内部定义自定义的jQuery函数吗？

例如:

$(function(){
    $('select').jQueryExample();
    nativeExample();    
});

$.fn.jQueryExample = function(){
    //Do something
}

function nativeExample(a, b)
{   
    return a + b;
}

与此相反,它们在文档准备中被称为AND定义？

$(function(){
    $('select').jQueryExample();
    nativeExample();

    $.fn.jQueryExample = function(){
        //Do something
    }

    function nativeExample(a, b)
    {   
        return a + b;
    }
});

::编辑::

一个额外的问题.如果在文档准备就绪之外定义了一个函数,并且还调用了外部文档,那么会发生什么情况,而不是将其定义在外部,而是在文档内部调用？

我问这个是因为我在文档就绪范围之外定义了一个函数,这个函数是一个ajax调用,它在页面加载时获取新消息.是应该在文件外部还是内部调用？

例如:

$(function(){
 //Hello, I am jQuery

});

nativeExample();

function nativeExample(a, b)
{   
    return a + b;
}

而不是:

$(function(){

 nativeExample();

});


function nativeExample(a, b)
{   
    return a + b;
} …

我想知道哪一个是正确的运行js代码,根据窗口高度计算垂直菜单的高度,并按时,不迟到,不早.

我正在使用,document.ready但它并没有真正帮助我解决这个问题,它有时不设置,我必须重新加载页面,然后它正在工作,但不是第一次加载.

如何解决这个问题呢？

这是我的代码:

$(document).ready(function(){
     var winh = document.body.clientHeight;
     var footer = document.getElementById('footer').offsetHeight;
     document.getElementById('sidebar').style.height = winh - 5/2*footer + 'px';
     document.getElementById('sidebar').style.marginBottom = footer + 'px';

     $(window).resize(function(){
         var winh = document.body.clientHeight;
         var footer = document.getElementById('footer').offsetHeight;
         document.getElementById('sidebar').style.height = winh - 5/2*footer + 'px';
         document.getElementById('sidebar').style.marginBottom = footer + 'px';
     });
});

• 通常,在开始之前,您不会开始查询DOM $(document).ready().
• 在下面的两个选项中,Widget被声明(并且元素被查询)在$(document).ready().
• 这个可以吗？我可以初始化jQuery元素(只要我不操作任何东西),就绪处理程序的OUTSIDE？
• 将整个Widget定义放入其中会更好$(document).ready()吗？
• 我应该等到Widget.init()查询元素吗？
• 注意:我是JS设计模式的新手,所以请注意我是否遗漏了一些东西

选项1

Widget = {
    ele : $('#ele'),
    init : function(){ ... }
};

$(document).ready(function(){
    Widget.init();
});

选项2

Widget = (function(){
    var privateEle = $('#privateEle');
    return {
        publicEle: $('#publicEle'),
        init: function(){ ... }
    };
}());

$(document).ready(function(){
    Widget.init();
});

我想检查某个特定的 JS 文件是否已加载到 document.ready 中。

像这样的东西：

if(file already called/loaded) { // my code }
else {//some other code}

JS 文件不是任何插件。

它基本上是一个与 SharePoint 相关的 JS 文件，例如 Sp.JS。

我们只知道文件名。

[更新 - 添加代码]

我添加了以下代码，它在控制台中抛出错误： SP.Runtime.js 已加载。

如果我删除 SP.Runtime.js 的加载，我的代码将无法在默认情况下未加载 Runtime.Js 的某些页面中运行。

$(document).ready(function() {
    var scriptbase = _spPageContextInfo.webServerRelativeUrl + "/_layouts/15/";
    $.getScript(scriptbase + "init.js",
    function() {
        $.getScript(scriptbase + "SP.Runtime.js",
        function() {
            $.getScript(scriptbase + "SP.js",
            function() {
                    $.getScript(scriptbase + "SP.Taxonomy.js",
                    function() {
                        context = SP.ClientContext.get_current();
                       // My custom function //

                    });
            });
    });
    });
});

请建议。 …

我有一个选择 onchange 触发 js 函数来显示/隐藏tinymce编辑器：

<select id="mySelect" onChange="myFuntion()">
<option value="1">Yes</option>
<option value="0">No</option>

然后我有一个带有tinymce的文本区域（在页面加载时加载）。

<textarea class="mce" id="myTextarea"></textarea>
<script src="tinymce.js></script> // file with global tinymce.init({ ... });

js函数如下：

<script>    
function myFuntion(){ 
  if( $( '#mySelect' ).val() == '1' ) { tinymce.get( 'myTextarea' ).show(); } 
  else { tinymce.get( 'myTextarea' ).hide(); }
}
$( document ).ready(function() { myFuntion(); }); // show/hide tinymce based on how the mySelect setting is on page load

一切都很好，除了“ $( document ).ready(function(){ myFuntion(); }); ”抛出错误“ Uncaught TypeError: Cannot read property 'show' …

我正在尝试学习jQuery,我很困惑document.ready()函数的工作原理

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

在HTML中,

<script type="text/javascript" src="jquery.js"></script>
<script src="script.js" type="text/javascript"></script>

链接位于文档的最底部,就在关闭正文标记之前.在我的javaScript文件中,我的所有代码都在.ready函数中.然而,当我加载页面,并将鼠标悬停在链接上时,我的光标不会变成指针几秒钟,如果我立即向下滚动,文本尚未加载几秒钟,或者.我的javaScript文件有一堆iframe等...所以我可以理解为什么延迟,但令我困惑的是,我认为.ready函数的重点是javaScript没有加载,直到页面中的其他所有内容先被装？所以我的文字和我的CSS应该马上工作吗？这是我的代码,如果它有帮助.如果需要,我也可以发布css.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>myPage</title>
    <link rel="stylesheet" type="text/css" href="styles2.css">

</head>
<body> 

<div id="container">

<div id="backgroundLeft"><img id='backgroundLeftImage' src="Left.jpg" width="100%"></div>

<div id="wrap">

<p id="text">...some text... <span id="firstLink" class="link">click me</span>.<span><iframe id="frame" class="rect" scrolling="no" marginwidth=0 marginheight=0></iframe>

</span> ...some more text.... <span id="secondLink" class="link">click me</span>,
</span><span>
    <iframe  id="frame2" class="rect" scrolling="no" marginwidth=0 marginheight=0></iframe>
</span>
 ... some more text... <span id="thirdLink" class="link">click me</span> </span><span>
    <iframe  id="frame3" class="rect" scrolling="no" marginwidth=0 marginheight=0></iframe>
</span> ... some more text... …

window.onload从我的阅读中听起来像是可以松散地互换,document.onload但我的经验表明这是不正确的.我继承了一个JS脚本,我不知道如何纠正它.我想要在DOM加载后执行JS,而不是在加载所有资源之后执行.我怎样才能做到这一点？

目前我有:

window.onload = initDropMenu;

我试过了:

 document.onload = initDropMenu;

这只会导致菜单无法加载.我也尝试从JS中完全删除该行,并让DOM通过以下方式执行:

<body onload="initDropMenu()">

这也导致没有菜单,并且在控制台中没有错误.我的JS知识有限,我在这里缺少什么？