解决easyUI中jquery.easyui.min.js报错:window.onload与$(function)的执行时机差异

作者:纸飞机时间:2026-10-30 02:27:37浏览:548

本文介绍在easyUI开发中遇到jquery.easyui.min.js报错的解决方法。通过对比window.onload与$(function)的执行时机,指出前者等待所有资源加载完毕,后者仅等待DOM就绪。建议在导入easyUI库后使用window.onload避免脚本未加载完成的错误。

easyUI开发中的库引入与报错现象

easyUI作为jQuery的一个第三方插件,因其便捷性而广受欢迎。它整合了网页开发的核心要素:JavaScript逻辑、HTML结构与CSS样式。引入easyUI库后,开发者可直接复用内置代码,快速搭建网页基础框架。

项目初始化需先引入easyUI相关函数库:


<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">  
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">  
<script type="text/javascript" src="easyui/jquery-1.7.2.min.js"></script>  
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script> 

以下是项目的具体代码配置:


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>欢迎来到后台管理界面</title>
    <link rel="stylesheet" type="text/css" href="plugin/themes/icon.css" />
    <link rel="stylesheet" type="text/css" href="plugin/themes/default/easyui.css" />
  </head>
  <script type="text/javascript" src="js/jquery.min.js"></script>
  <script type="text/javascript" src="js/jquery.easyui.min.js"></script>
  <script type="text/javascript" src="plugin/easyloader.js"></script>
  <script type="text/javascript" src="plugin/locale/easyui-lang-zh_CN.js"></script>
  <script type="text/javascript">
    $(function() {
      $('#tt').tabs('add', {
        title: '查看',
        content: 'Tab Body',
        closable: true,
        tools: [{
          iconCls: 'icon - mini - refresh',
          handler: function() {
            alert('refresh');
          }
        }]
      });
    });
  </script>
  <body class="easyui-layout">
    <div data-options="region:'north',split:true" style="height:100px;">
      <div>
        <h1>拓胜公司后台管理系统</h1></div>
    </div>
    <div data-options="region:'south',split:true" style="height:60px;">
      <div style="margin: auto; width: 400px ; padding: 20px; font-size: 20px;">Copyright &copy;拓胜公司 版权所有</div>
    </div>
    <div data-options="region:'west',title:'系统管理',split:true" style="width:240px;">
      <div id="aa" class="easyui-accordion">
        <div title="管理员管理" style="padding: 10px;">
          <ul>
            <li><a href="#">添加</a></li>
            <li><a href="#">查看</a></li>
            <li><a href="#">修改</a></li>
            <li><a href="#">删除</a></li>
          </ul>
        </div>
      </div>
    </div>
    <div data-options="region:'center',title:'编辑区 '" style="padding:5px;background:#eee;">
      <div id="tt" class="easyui-tabs" ">
    <div title="添加 " data-options="closable:true " style="overflow:auto;padding:20px;display:none; ">
      tab1
    </div>
    <div title="删除 " data-options="closable:true " style="overflow:auto;padding:20px;display:none; ">
      tab2
    </div>
  </div>
</div>
</body>
</html>

尽管上述代码结构看似无误,但运行时会触发如下报错信息:

easyUI开发中的库引入与报错现象

报错指向jquery.easyui.min.js库存在问题。鉴于该库由官方提供且经过测试,理论上不应存在此类错误。

经多次调试发现,在代码中加入alert(11)后,浏览器不再报错,JavaScript逻辑得以正常执行:


<script type="text/javascript">
    $(function() {
      alert(11);
      $('#tt').tabs('add', {
        title: '查看',
        content: 'Tab Body',
        closable: true,
        tools: [{
          iconCls: 'icon - mini - refresh',
          handler: function() {
            alert('refresh');
          }
        }]
      });
    });
  </script>

若将jQuery代码替换为window.onload()形式,代码同样能保持正常运行:


<script type="text/javascript">
  window.onload=function(){
    $('#tt').tabs('add', {
        title: '查看',
        content: 'Tab Body',
        closable: true,
        tools: [{
          iconCls: 'icon - mini - refresh',
          handler: function() {
            alert('refresh');
          }
        }]
      });
  }
  </script>

window.onload与$(function)的执行时机差异

总结原因如下:

1、window.onload()与$(function(){})的执行区别

A) window.onload()需等待页面所有元素(包括DOM和JavaScript脚本)完全加载后,才执行内部函数。

B) $(function(){})仅在页面DOM元素加载完成后即执行内部函数,不等待JavaScript脚本加载。

2、由于开发easyUI项目时已预先导入JavaScript代码,若使用$(function(){}),此时JavaScript脚本可能尚未加载完毕,导致:

jquery.easyui.min.js库因依赖未就绪而报错。因此,在使用easyUI开发时,应避免使用$(function(){}),推荐改用window.onload()。

以上为easyUI开发中jquery.easyui.min.js报错问题的解决思路,供参考。

作者最新文章