对于网站来说很多页面之间都有着大量的共享模块，如页头，页脚和用户栏等。很多时候为了方便、省事，我们在公共模块写函数，然后在别的页面里调用。但我们在引用公共的js函数时，有些可以引用，有些却报错；这是因为js加载的问题，即当前页面加载完，但有些公共页面却没有加载完就引用公共的js，就会报这个函数没有找到。


引用公共页头的js

结果如下：

引用公共页脚的js

结果如下：

从上面的两个例子，我们可以知道js加载顺序是从上往下的加的，页头先加载-——当前页面——页脚最后，所有当前页面引用了没有加载完成的页脚js就会报“f_public is not defined”

解决方法如下：

$(document).ready(function () {

        f_public();

})

当 DOM（文档对象模型） 已经加载，并且页面（包括图像）已经完全呈现时，会发生 ready 事件；即等页脚加载完才调用这个函数。

js中页面执行顺序

1：使用jQuery的$(function){};

2：使用jquery的$(document).ready(function(){});前两者本质上没有区别，第1种是第2种的简写方式。两个是document加载完成后就执行方法。

3：使用jQuery的$(window).load(function(){});

4:使用window.onload = function(){} 第3种和第4种都是等到整个window加载完成执行方法体。两者也没有区别，只是一个使用dom对象，一个使用jQuery对象。

5：在标签上静态绑定onload事件，<body onload="aaa()">等待body加载完成，就会执行aaa()方法。

那么，这五种方式，执行的先后顺序是怎么样的呢？

通过下方代码验证发现：

使用1：jQuery的$(function){}和2：jquery的$(document).ready(function(){});无论位置放置在哪里，总是优先其余三种方式（原因是：这两种方式是在document加载完成后就执行，后三种是等到整个　　window页面加载完成后才执行），这两者之间的执行顺序是谁在上方谁优先执行。

使用3：jQuery的$(window).load(function(){});

　　　　4:window.onload = function bbb(){}这两种方式，总是优先于<body onload="aaa()">执行。他们两者执行顺序也是根据谁在上方谁先执行。

使用5：<body onload="aaa()">总是最后执行。

<script type='text/javascript'>

　　window.onload = function(){

　　　　alert("页面加载完成====》onload");

　　}

　　$(window).load(function(){

　　　　alert("jquery===》window load" );

　　})

　　$(document).ready(function () {

　　　　alert("jquery====》document ready");

　　});

　　$(function(){

　　　　alert("jquery====》document onload");

　　});

　　function aaa(){

　　　　alert("静态标签====》onload");

　　}

</script>

<body onload="aaa()">

</body>

引用公共页面的js函数报错的更多相关文章

  1. javascript笔记——点击按钮（或超链接）如何跳转到另外一个页面并执行目标页面的js函数

    页面跳转同时执行js代码$(function(){});url参数传递 标题的前半部分其实不必赘述,按钮也可以换成超链接.. 假设是需要在A页面上的一个按钮,点击后跳转到B页面,传一些参数后且并B页面 ...

  2. mutillidae之注册页面的Insert型报错注入

    http://127.0.0.1/mutillidae/index.php?page=register.php 1.注册一个用户试一试,发现页面只提示用户注册成功信息,并五其它可回显信息,果断尝试盲注 ...

  3. 明明引用了jquery，js还是报错

    先引jquery,不然加载上一个js的时候jquery还没有加载 <script src="js/jquery-1.9.1.js" type="text/javas ...

  4. 【shiro】使用shiro搭建的项目，页面引用js，报错：Uncaught SyntaxError: Unexpected token <

    使用shiro搭建项目过程中,总是出现登录页面 登录第一次有效果,登陆第二次出现302状态码,第三次又有效果,第四次又没有效果的局面. 因此,采用ajax提交页面登录的用户名和密码,但是在引用js的过 ...

  5. js执行函数报错Cannot set property 'value' of null怎么解决？

    js执行函数报错Cannot set property 'value' of null 的解决方案: 原因:dom还没有完全加载 第一步:所以js建议放在body下面执行, 第二步:window.on ...

  6. C++ socket bind()函数报错 不存在从 "std::_Binder<std::_Unforced, SOCKET &, sockaddr *&, size_t &>" 到 "int" 的适当转换函数

    昨天还可以正常运行的程序,怎么今天改了程序的结构就报错了呢?我明明没有改动函数内部啊!!! 内心无数只“草泥马”在奔腾,这可咋办呢?于是乎,小寅开始求助于亲爱的度娘...... 由于小寅知识水平有限, ...

  7. Winform下CefSharp的引用、配置、实例与报错排除(源码)

    Winform下CefSharp的引用.配置.实例与报错排除 本文详细介绍了CefSharp在vs2013..net4.0环境下,创建Winfrom项目.引用CefSharp的方法,演示了winfro ...

  8. thinkphp在前端页面的js代码中可以使用 U方法吗? 可以使用模板变量如__URL__等吗?

    thinkphp在前端页面的js代码中可以使用 U方法吗? : 可以的! tp的U方法, 是"全局的", 什么是全局的? 就是, 可以在 "任何地方"使用的: ...

  9. eclipse 如何忽略js文件报错

    本文翻译自:http://stackoverflow.com/questions/10254922/jquery-mobile-1-1-0-min-triggers-errors-in-eclipse ...

随机推荐

  1. Scrapy爬虫day1——环境配置

    安装 Scrapy pip install scrapy 配置虚拟环境 mkvirtualenv Spider 创建项目 在Spider的虚拟环境中运行 scrapy startproject Boo ...

  2. 敏捷宣言（Agile Manifesto）和敏捷开发十二原则

    敏捷宣言 The Agile Manifesto Individuals and interactions over Process and tools 个体与交互 重于 过程和工具 Working ...

  3. 让NOI Linux变得可用

    开始用NOI Linux-- 上古加阉割,还是32位,完全不可用的亚子-- 怎么办,我真的好想念16.04 于是就走上魔改之旅-- 一些神奇的操作 git 听说直接装的话会是上古版本 sudo add ...

  4. [考试反思]0805NOIP模拟测试13：窒息

    呼啊...苟住了.rank #3 第二次分机房的收官之战.发挥比较稳定 然而差点就不稳定了!!! 过了一遍题目,难度大约是升序,但是一道都不会做!!! 本来感觉T1是一道数学题,以为45分钟以内可以切 ...

  5. Android 开源库 GitHub 托管

    本文微信公众号「AndroidTraveler」首发. 背景 之前给大家写过一篇文章 Android 上传开源项目到 jcenter 实战踩坑之路,分享了上传开源项目到 jcenter 上面的一些踩坑 ...

  6. javaScript中this到底指向谁

    1.前言 在JavaScript中,this的指向一直是大多数初学者的易错点,总是搞不清楚this到底指向谁,而在求职面试中,this的指向问题往往又是高频考点.本篇博文就来总结一下在JavaScri ...

  7. python——namedtuple

    namedtuple()概念理解分享 我们都知道元组tuple的概念,tuple是一个定义之后就不能够更改的可迭代对象,namedtuple作为tuple的兄弟具有同样的属性,一旦定义就不可以更改.但 ...

  8. docker监控容器

    Weave Scope: 是能够自动生成一张 Docker 容器web动态图的监控软件,能够让我们直观地理解.监控和控制容器. 监控一台主机: 第一步:安装 [root@localhost ~]# c ...

  9. 009.Kubernetes二进制部署kube-apiserver

    一 部署master节点 1.1 master节点服务 kubernetes master 节点运行如下组件: kube-apiserver kube-scheduler kube-controlle ...

  10. Ansible之常用模块（一）

    ansible之所以功能强大,不是ansible本身,是因为它有众多的模块,前文我们介绍了ansible的基础介绍,系列命令的用法以及选项的说明,通过前文的学习我们知道了ansible是基于pytho ...