首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何让Chrome在没有jQuery的情况下在脚本标记上触发load/onload事件

要让Chrome在没有jQuery的情况下在脚本标记上触发load/onload事件,可以使用原生JavaScript来实现。以下是一种可能的解决方案:

代码语言:txt
复制
<!DOCTYPE html>
<html>
<head>
  <title>Load Event Example</title>
</head>
<body>
  <script>
    function loadScript(url, callback) {
      var script = document.createElement("script");
      script.type = "text/javascript";

      if (script.readyState) {  // IE
        script.onreadystatechange = function() {
          if (script.readyState === "loaded" || script.readyState === "complete") {
            script.onreadystatechange = null;
            callback();
          }
        };
      } else {  // Others
        script.onload = function() {
          callback();
        };
      }

      script.src = url;
      document.getElementsByTagName("head")[0].appendChild(script);
    }

    loadScript("path/to/your/script.js", function() {
      // Script loaded and executed successfully
      // Perform any additional actions here
    });
  </script>
</body>
</html>

上述代码中,我们定义了一个loadScript函数,该函数接受两个参数:url表示要加载的脚本文件的URL地址,callback表示脚本加载完成后要执行的回调函数。

在函数内部,我们创建一个新的script元素,并根据浏览器的不同设置相应的事件处理程序。对于IE浏览器,我们使用onreadystatechange事件来监听脚本的状态变化,当状态变为"loaded"或"complete"时,表示脚本加载完成,执行回调函数。对于其他浏览器,我们使用onload事件来监听脚本的加载完成。

最后,我们将script元素添加到文档头部中,并指定要加载的脚本文件的URL地址。这样,在脚本加载完成后,就会触发相应的事件处理程序,从而执行回调函数。

这种方法可以在没有使用jQuery的情况下实现脚本的异步加载,并在加载完成后执行相应的操作。它适用于在脚本加载完成后执行特定的逻辑或操作,例如初始化某个库或插件、调用API等。

推荐腾讯云相关产品:腾讯云对象存储(COS),用于存储和管理大规模的非结构化数据,如图片、音频、视频等。您可以通过以下链接了解更多信息:腾讯云对象存储(COS)

请注意,这仅是一个示例答案,可能还有其他方法可以实现相同的效果。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

windowonload事件和domcontentloaded执行顺序

上述三个图分别为chrome edge和Firefox,我们发现他们结果都是一样,先执行documentloded事件,然后再执行window.onload事件。...当window.onload事件触发时,页面上所有的DOM,样式表,脚本,图片,flash都已经加载完成了。...相反,DOMContentLoaded事件触发后添加事件侦听器永远不会执行。 浏览器还在对象load上提供事件window。当此事件触发时,表示页面上所有资源都已加载,包括图像。...可以jQuery中使用查看此事件$( window ).on( "load", handler )。如果代码依赖于加载资源(例如,如果需要图像尺寸),则应将代码放在load事件处理程序中。...尽管由 .ready() 添加处理程序总是动态加载脚本中执行,但是窗口加载事件已经发生,并且这些侦听器永远不会运行。

3.7K10

JS异步加载三种方式

事件触发,而现在很多页面的代码都在onload时还执行额外渲染工作,所以还是会阻塞部分页面的初始化处理。...,然后放在windowonload方法里面执行,这样就解决了阻塞onload事件触发问题。...脚本将在下载后尽快执行,作用同defer,但是不能保证脚本按顺序执行。他们将在onload事件之前完成。...三:延迟加载 有些JS代码某些情况需要使用,并不是页面初始化时候就要用到。延迟加载就是为了解决这个问题。...JS延迟加载机制(LazyLoad):简单来说,就是浏览器滚动到某个位置触发相关函数,实现页面元素加载或者某些动作执行。如何实现浏览器滚动位置检测呢?

3.1K20
  • 前端知识普及之页面加载

    里面需要进行一点解释 即DOMContentLoaded事件domContentLoaded那段触发。...相关事件 domComplete: 1441112693214, // load 事件发送给文档,也即 load 回调函数开始执行时间 // 注意如果没有绑定...//计算load触发时间 var loadTime = t.domComplete - t.domLoading; 更直观,我们可以Chromedeveloper工具network选项里面得到我们想要答案...这两个线,分别代表是DOMContentLoaded和onload触发时间。 这也更能直观看出,DOMContentLoaded事件onload事件触发吧。现在回到我们开头那个问题。...这个时候模拟触发DOMContentLoaded事件,其实和onload事件触发时间并没有太久时间距离。 这种方式兼容低版本IE还是不太可靠

    1.6K90

    使用原生 JavaScript 页面加载完成后处理多个函数

    网页中 JavaScript 脚本运行是需要通过事件触发。一般做法就是在网页中,直接编写几个函数,有的代码被加载时候就被浏览器处理,或者使用类似下面的代码来触发实现函数相关功能。...因为下面的 HTML 元素还没有加载出来,head 中处理这部分 HTML 元素脚本已经被执行了。...使用监听器脚本与 HTML 元素分离 监听器实际上功能就是行为与内容分离。...以前需要在 HTML 中加上一些触发事件触发 JavaScript 相关函数,而现在直接在 JavaScript 中对某个元素使用监听器,监听这个元素事件,如果这个元素被触发了某些事件监听器中又定义了这个事件对应处理函数...window.onload 事件 onload 事件只有整个页面已经完全载入时候才会被触发,我们将 JavaScript 代码写进 onload 事件中,就可以保证 HTML 元素被加载完成之后,

    2.8K20

    【前端】:async、defer、onload、DOMContentLoaded

    DOMContentLoaded 当初始 HTML 文档被完全加载和解析完成之后,DOMContentLoaded 事件触发,而无需等待样式表、图像和子框架完成加载。...注意:DOMContentLoaded 事件必须等待其所属script之前样式表加载解析完成才会触发。 兼容性: ?...行为模拟: IE8中,可以使用readystatechange事件来检测DOM文档是否加载完毕.更早IE版本中,可以通过每隔一段时间执行一次document.documentElement.doScroll...总结: CSS 会阻碍 DOMContentLoaded; CSS 会阻塞 JS 执行; 2.2. onload The load event is fired when the whole page...2.3. jQuery.ready(fn) 源码摘录 API: // jQuery offers several ways to attach a function // that will run

    1.9K20

    探究网页资源究竟是如何阻塞浏览器加载

    阅读完这篇文章你将解开如下谜团: 如何Chrome 定制网络加载速度? 图片/视频/字体会阻塞页面加载嘛? CSS 是如何阻塞页面加载? JS 又是如何阻塞页面加载?...DOM 加载,更加不会阻塞页面渲染;当图片加载完成时候,会打印 onload,说明图片延迟了 onload 事件触发。...上面这是解析时遇到一个正常外链情况,正常外链下载和执行都会阻塞页面解析;而如果外链是通过 defer 或者 async 加载时候又会是如何呢? ?.../2.1.4/jquery.min.js') 我是 h1 标签 动态插入脚本加载完成后会立即执行,这和 async 一致,所以如果需要保证多个插入动态脚本执行顺序...DOMContentLoaded 和 onload 浏览器中加载资源涉及到 2 个事件,分别是 DOMContentLoaded 和 onload,那么它们之间有什么区别呢?

    2.1K30

    $(document).on和$(#idname).on和$(function(){ })区别

    引言   写前端时候经常用到js或jquery语法,有时候傻傻分不清,现在将学习过程中遇到总结一下。   ...(function(){})window.onload执行前执行,(function(){})类似于原生 js 中DOMContentLoaded事件 DOM 加载完毕后,页面全部内容(如图片等...DOM 文档加载步骤: 解析 HTML 结构 加载外部脚本和样式文件 解析并执行脚本代码 执行 $(function(){}) 内对应代码 加载图片等二进制资源 页面加载完毕,执行 window.onload...和$().click()用法一样,最大区别即优点是如果动态创建元素该选择器选中范围内是能触发回调函数。...2.该函数可以为同一元素、同一事件类型绑定多个事件处理函数。触发事件时,jQuery会按照绑定先后顺序依次执行绑定事件处理函数。   3.

    2.1K20

    10 种跨域解决方案(附终极方案)

    1.同源策略 跨域问题其实就是浏览器同源策略所导致。 同源策略是一个重要安全策略,它用于限制一个origin文档或者它加载脚本如何能与另一个源资源进行交互。...情况四: 请求中任意XMLHttpRequestUpload 对象均没有注册任何事件监听器;XMLHttpRequestUpload 对象可以使用 XMLHttpRequest.upload 属性访问...cookie 问题 想要传递 cookie 需要满足 3 个条件 1.web 请求设置withCredentials 这里默认情况下在跨域请求,浏览器是不带 cookie 。..., chrome 中是能看到返回值,但是只要不满足以上其一,浏览器会报错,获取不到返回值。...> let first = true; // onload事件触发2次,第1次加载跨域页,并留存数据于window.name function load() { if (first

    2.7K12

    10 种跨域解决方案(附终极方案)

    1.同源策略 跨域问题其实就是浏览器同源策略所导致。 ❝「同源策略」是一个重要安全策略,它用于限制一个origin文档或者它加载脚本如何能与另一个源资源进行交互。...情况四: 请求中任意XMLHttpRequestUpload 对象均没有注册任何事件监听器;XMLHttpRequestUpload 对象可以使用 XMLHttpRequest.upload 属性访问...cookie 问题 想要传递 cookie 需要满足 3 个条件 1.web 请求设置withCredentials 这里默认情况下在跨域请求,浏览器是不带 cookie 。..., chrome 中是能看到返回值,但是只要不满足以上其一,浏览器会报错,获取不到返回值。...> let first = true; // onload事件触发2次,第1次加载跨域页,并留存数据于window.name function load() { if (first

    3K30

    Web 性能优化-首屏和白屏时间

    我们只需要监听首屏内所有的图片 onload 事件,获取图片 onload 时间最大值,并用这个最大值减去 navigationStart 即可获得近似的首屏时间。 <!...(1) Performance.timing chrome 中查看 performance.timing 对象: 与浏览器对应状态如下图: 左边红线代表是网络传输层面的过程,右边红线代表了服务器传输回字节后浏览器各种事件状态...loadEventStart: load 事件发送给文档,也即 load 回调函数开始执行时间。 loadEventEnd: load 事件回调函数执行完毕时间。...jQuery 中经常使用 $(document).ready() 其实监听就是 DOMContentLoaded 事件。 (2) load 是指页面上所有的资源(图片,音频,视频等)加载完成。...jQuery 中 $(document).load() 监听load 事件

    2.8K21

    异步加载脚本保持执行顺序

    2.Window onload: 通过监听windowonload事件触发行内代码执行。只要确保外部脚本window。Onload之前下载执行就可以保持执行顺序。 运行结果: ?...:1.必须确保异步脚本是通过阻塞onload事件方式加载。          ...4.Script onload: 前面提到整合技术会增加页面的脆弱性、延迟和开销,通过监听脚本onload事件可以解决这些问题。 运行结果: ? ?...缺点:需要修改外部脚本,对第三方库不适用。 多个脚本按序执行: 正常引入脚本: 运行结果: ? ? 采用XHR eval: 运行结果: ? ? 由于脚本没有按顺序执行,出现未定义错误。...代码: /* 数组queuedScripts存储执行队列中脚本,每个脚本是拥有三个属性对象: response: XHR响应 onload: 脚本加载后触发函数 bOrder: 如果该脚本需要依赖其他脚本按顺序执行

    1.8K20

    再谈DOMContentLoaded与渲染阻塞—分析html页面事件与资源加载

    这个事件触发之后(而不是window.load事件),会进入异步事件驱动阶段(另一个线程控制)。也就是说,DOM解析工作不完成,用户与页面的很多(并不是所有)事件交互就无法进行。...,不确定图片样式到底如何,牵扯到重绘资源问题),js不会阻塞img解码、paint(估计chrome做了优化,具体本人还不知,希望客官补充)。...而 DOMContentLoaded 只有 defer 脚本执行结束后才会被触发。...如果页面还是没有解析完成,就会停下来(阻塞页面)等此脚本执行完毕再继续解析。async-script 可能在 DOMContentLoaded 触发之前或之后执行,但一定在 load 触发之前执行。...而当页面有大量二进制文件(页面加载时长大于阻塞时长时候),document.readyState=complete 可能反而在 onload 事件之后才能触发(这个我未完成验证出这种情况) 我觉得

    2K20

    再谈DOMContentLoaded与渲染阻塞—分析html页面事件与资源加载

    这个事件触发之后(而不是window.load事件),会进入异步事件驱动阶段(另一个线程控制)。也就是说,DOM解析工作不完成,用户与页面的很多(并不是所有)事件交互就无法进行。...,不确定图片样式到底如何,牵扯到重绘资源问题),js不会阻塞img解码、paint(估计chrome做了优化,具体本人还不知,希望客官补充)。...而 DOMContentLoaded 只有 defer 脚本执行结束后才会被触发。...如果页面还是没有解析完成,就会停下来(阻塞页面)等此脚本执行完毕再继续解析。async-script 可能在 DOMContentLoaded 触发之前或之后执行,但一定在 load 触发之前执行。...而当页面有大量二进制文件(页面加载时长大于阻塞时长时候),document.readyState=complete 可能反而在 onload 事件之后才能触发(这个我未完成验证出这种情况) 我觉得

    5K150

    10 种CORS跨域解决方案

    1.同源策略 跨域问题其实就是浏览器同源策略所导致。 同源策略是一个重要安全策略,它用于限制一个origin文档或者它加载脚本如何能与另一个源资源进行交互。...情况四: 请求中任意XMLHttpRequestUpload对象均没有注册任何事件监听器;XMLHttpRequestUpload对象可以使用XMLHttpRequest.upload属性访问。...情况五: 请求中没有使用ReadableStream对象。 b.非简单请求 除以上情况。 c.Node 中解决方案 原生方式 我们来看下后端部分解决方案。...cookie 问题 想要传递cookie需要满足 3 个条件 1.web请求设置withCredentials 这里默认情况下在跨域请求,浏览器是不带 cookie 。...> let first = true; // onload事件触发2次,第1次加载跨域页,并留存数据于window.name function load() { if (first

    5.3K20

    onload 和 domready

    事件就会迟迟无法触发 所以出现了 DOM Ready 事件 熟悉 jQuery的人,都知道 DomReady 事件 $(document).ready(function(){ alert("jQuery... 事件onload 事件快许多,它是 DOM 准备完毕后触发(不需等待资源下载完毕) DOMContentLoaded 事件许多 Webkit 浏览器以及 IE9 上都可以使用,此事件会在 DOM...所以目前所有的 hack 方法都是为了 IE6,7,8支持 DOM Ready 事件 下面代码可以发现 jQuery ready 事件稍微早于 DOMContentLoaded 事件,但都是实现了...,比如一张图片只要 img 标签完成,不用等这个图片加载完成,就可以设置图片宽高属性或样式等; 2、Dom Load整个 document 文档(包括了加载图片等其他信息)加载完成后就可以直接对...一样,会在页面或图像加载完成后触发(即所有元素资源都下载完毕),但是: FireFox script 元素不支持 onreadystatechange 事件,只支持 onload 事件 IE

    2.7K20

    《微信小程序七日谈》- 第三天:玩转Page组件生命周期

    今天这篇文章简单记录一下在使用小程序Page组件时对于其生命周期一些使用心得。...浏览器用户行为事件机制,以及我们所熟悉jQuery中,使用on作为捕获/监听事件API命名,这种情形下可以把on理解为当某件事情发生时做某些行为,这也是大部分前端工程师对on语义理解。...onload触发时机是文档加载完成之后,执行我们定义onload逻辑之前,文档已经完成了load行为。也就是说,onload没有拦截load行为,而是load事件之后发生。...具体到Page生命周期钩子函数,大家请凭第一感觉理解下面几个函数执行时机: onLoad onShow onReady 我相信大部分人对于这三者理解是:钩子函数load/show/ready完成之后执行...小程序中并没有父子组件关系谱,组件数据不会区分props和state,全部是统一data,并且全部是动态。任何data修改都会触发Rerender。

    1.2K100

    JavaScript 开发者需要了解15个 DevTools 技巧

    查找未使用 JavaScript Chrome Coverage 面板可以让你能够快速找到 JavaScript 有没有被使用。...DOM 中被删除 发生此类事件时,将在 Sources 面板中自动触发断点。...断点有的时候并不好用,例如,如果在运行 1000 次循环最后一次循环报错了。这时你可以添加一个条件断点,它仅在满足特定条件时才触发断点,例如 i > 999 。...这可以你: 不需要构建工具情况下在实时编辑脚本或样式 离线开发一个网站,该网站通常会要求第三方域提供基本文件 临时替换不必要脚本,例如 analytics。...强制触摸而不是鼠标或其他本机设备事件。 设置空闲状态以检查你应用如何响应锁定屏幕。

    4.8K20

    用框架你,可能早已忽略了这些事件API

    乍一看,DOMContentLoaded 事件非常简单。DOM 树准备就绪 —— 这是它触发条件。它并没有什么特别之处。...window.onload 当整个页面,包括样式、图片和其他资源被加载完成时,会触发 window 对象上 load 事件。可以通过 onload 属性获取此事件。...[4] img onload [4] readyState:complete [4] window onload 方括号中数字表示发生这种情况大致时间。...当页面和所有资源都加载完成时,window 上 load 事件就会被触发。我们很少使用它,因为通常无需等待那么长时间。...当用户最终离开时,window 上 unload 事件就会被触发处理程序中,我们只能执行不涉及延迟或询问用户简单操作。正是由于这个限制,它很少被使用。

    1.8K10

    HTML解析之DOMContentLoaded和onload

    说在前面 很久很久以前,我封装自己JQuery库时就使用过DOMContentLoaded,觉得这个知识点看看别的文章就行了,不过现在我想把它记下来。...(DOMContentLoaded事件触发之前)。...不同是执行时机,async代码加载完之后会马上执行,并且执行时会阻塞HTML解析。而defer则要等到文档解析DOM构建完成,DOMContentLoaded事件触发之前执行。...另一个不同事件 load 应该仅用于检测一个完全加载页面。 使用 DOMContentLoaded 更加合适情况下使用 load 是一个令人难以置信流行错误,所以要谨慎。...注意:DOMContentLoaded 事件必须等待其所属script之前样式表加载解析完成才会触发

    1.6K20
    领券