开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

外部js脚本在使用jQuery加载的页面上不起作用

基础概念

jQuery 是一个快速、小巧且功能丰富的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。外部 JavaScript 脚本通常是指存储在单独 .js 文件中的代码，通过 <script> 标签引入到 HTML 页面中。

可能的原因及解决方法

加载顺序问题：
- 原因：如果 jQuery 库在外部脚本之后加载，那么外部脚本在使用 jQuery 时可能会因为 jQuery 尚未加载完成而报错。
- 解决方法：确保 jQuery 库在外部脚本之前加载。
- 解决方法：确保 jQuery 库在外部脚本之前加载。

作用域问题：
- 原因：如果外部脚本尝试在全局作用域中使用 $ 或 jQuery，而 jQuery 没有正确加载，可能会导致冲突。
- 解决方法：确保 jQuery 正确加载，并且在使用 $ 或 jQuery 之前检查其是否存在。
- 解决方法：确保 jQuery 正确加载，并且在使用 $ 或 jQuery 之前检查其是否存在。
路径问题：
- 原因：外部脚本文件的路径可能不正确，导致无法加载。
- 解决方法：确保外部脚本文件的路径正确。
- 解决方法：确保外部脚本文件的路径正确。
内容安全策略（CSP）：
- 原因：如果页面启用了内容安全策略（CSP），可能会阻止外部脚本的加载。
- 解决方法：检查并调整 CSP 设置，允许加载外部脚本。
- 解决方法：检查并调整 CSP 设置，允许加载外部脚本。

示例代码

假设你有一个外部脚本 external-script.js，内容如下：

$(document).ready(function() {
    $('p').css('color', 'red');
});

确保在 HTML 页面中正确引入 jQuery 和外部脚本：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery Example</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="path/to/your/external-script.js"></script>
</head>
<body>
    <p>This is a paragraph.</p>
</body>
</html>

参考链接

通过以上方法，你应该能够解决外部 JavaScript 脚本在使用 jQuery 加载的页面上不起作用的问题。

相关搜索:如何延迟在jquery中加载外部页面 Jquery页面加载选择更改在移动设备上不起作用使用jquery动态加载js脚本 jQuery模糊在页面加载时不起作用 Jquery/javascript在节点js项目上不起作用 JQuery在移动设备上不起作用-下拉和加载功能 jQuery表排序程序在动态加载的表上不起作用？是否可以使用从外部加载的jQuery脚本来更改CSS？页面加载动画上的jQuery不起作用点击img使用jquery在移动设备上不起作用滚动到页面底部时使用ajax加载PHP代码-在iPhone上不起作用使用jQuery在页面加载时插入值 Jquery在javascript创建的表上不起作用 .delay()在我的.show() JQuery上不起作用圆环图的图表js在HTML页面上不起作用在加载外部js时使用的Angular 6加载程序仅在页面加载后在脚本中运行JS 页面转换的jquery ajax脚本不起作用包含的jQuery在包含的html上不起作用使用markdown的外部链接在jekyll“帖子”上不起作用

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

使用 Babylon.js 在 HTML 页面加载 3D 对象

五一 Windwos Blogs 推了一篇博客， Babylon.js v3.2 发布了。因为一直有想要在自己博客上加载 3D 对象的冲动，这两天正好看到了，就动手研究研究。...期待美好而炫酷的未来ing Babylon.js 是什么 Babylon.js 是一个 JavaScript 开源框架，可以在浏览器或 Web 应用程序中简单便捷的构建 3D 游戏和 WebGL、WebVR...这里以 STL 对象为例，首先需要引入两个 js 文件。一个是 Babylon.js ，另一个是 STL Loader， js 文件在 GitHub 中自行搜索下载引入。...:none;"> 紧接着注册一个 DOM 事件，我们的渲染代码将在事件里完成，以确保执行渲染之前加载整个 DOM 。...这里相机使用 ArcRotateCamera ，鼠标可以控制旋转和缩放。光源使用 HemisphericLight 半球光，用来模拟现实中的环境光。当然你也可以使用其他相机和光源，文档链接已给出。

4K5 0

使用 Babylon.js 在 HTML 页面加载 3D 对象

五一 Windwos Blogs 推了一篇博客， Babylon.js v3.2 发布了。因为一直有想要在自己博客上加载 3D 对象的冲动，这两天正好看到了，就动手研究研究。...期待美好而炫酷的未来ing Babylon.js 是什么 Babylon.js 是一个 JavaScript 开源框架，可以在浏览器或 Web 应用程序中简单便捷的构建 3D 游戏和 WebGL、WebVR...这里以 STL 对象为例，首先需要引入两个 js 文件。一个是 Babylon.js ，另一个是 STL Loader， js 文件在 GitHub 中自行搜索下载引入。...:none;"> 紧接着注册一个 DOM 事件，我们的渲染代码将在事件里完成，以确保执行渲染之前加载整个 DOM 。...这里相机使用 ArcRotateCamera ，鼠标可以控制旋转和缩放。光源使用 HemisphericLight 半球光，用来模拟现实中的环境光。当然你也可以使用其他相机和光源，文档链接已给出。

4.8K12 0

layui布局使用jquery的load后页面js失效

布局页面 H5在主体部分用jquery的load方法引入其他页面本页面js失效山西的那个味...– 底部固定区域 –> © layui.com - 底部固定区域 --> 布局页面的js（如果使用下面方法写load方法会导致...js失效） js"> js/jquery2.1.js" type="text/javascript">..."> js/jquery2.1.js" type="text/javascript"> //JavaScript代码区域

4.2K3 0

layui布局使用jquery的load后页面js失效

布局页面 H5在主体部分用jquery的load方法引入其他页面本页面js失效山西的那个味...– 底部固定区域 –> © layui.com - 底部固定区域 --> 布局页面的js（如果使用下面方法写load方法会导致...js失效） js"> js/jquery2.1.js" type="text/javascript">..."> js/jquery2.1.js" type="text/javascript"> //JavaScript代码区域

2.6K1 0

缓冲加载图片的 jQuery 插件 lazyload.js 使用方法详解

使用：必须按照这种结构才有实际作用，需要对输出进行定义。可以节约服务器资源，并且有较好的用户体验。如果图片很大，当用户滚动到目标位置，需要较长时间下载。...开始使用 lazyload.js 第一步：加载相关文件。很明显，你要加载jquery和这个插件。...你可以使用以下代码，加载这几个文件： jquery.js" type="text/javascript"> jquery.lazyload.js...激活以下，你就可以在目标中使用了。 $("img.lazy").lazyload(); lazyload.js 高级使用方法：下面部分来自官方文档，将官方文档进行了一下简单的翻译。...使用 container 属性，能很轻松在容器中实现缓冲加载。首先，我们需要用css定义这个容器，然后用这个插件进行加载。

3K1 0

网站预加载 JS 脚本 instant.page 的使用方法

不知道各位是都了解 instant.page 网站预加载的脚本，至少我是不知道的，我之前接触过“dns-prefetch”标签，也在部分模板集成了接口，昨天看彧繎博客发现这个这个 instant.page...于是乎我就度娘了一下，发现它的作用是可以预加载，用户想访问的页面，用户点击网站链接之前，他们将鼠标悬停在该链接上。...如图所示，当鼠标在左侧文章链接悬停超过 65ms 后，右侧 Network 即会对文章页面进行预加载。而悬停未超过 65ms 时，则不会进行预加载。...，储存在国外服务器，对国内访问不太友好，可以将该JS脚本储存到自己的服务器上，点此获取该JS脚本，然后再根据以下格式在之前引用： <script type="module" src="... 属性局部允许：在使用的标签中添加 data-instant 属性（和白名单属性一样）仅预加载部分指定链接（白名单模式）：如果只想预加载特定的链接，请在中添加一个 data-instant-whitelist

1.8K3 0

WordPress 技巧：只在含有联系表单的页面加载 Contact Form 7 的 JS 和 CSS

Contact Form 7 是一个非常强大并且易用的联系表单的插件，我在很多项目中都用到它，但是这个插件有个很不好的地方，会在整个博客的所有前台页面都加载 Contact Form 7 的 JavaScript...和 CSS 代码，对于性能要求极致的我们，当然不允许这样的事情发生，所以我们可以通过下面的代码实现只在含有 Contact Form 7 表单的页面加载 Contact Form 7 的 JS 和 CSS...) $in_footer = false; wp_enqueue_script( 'contact-form-7', wpcf7_plugin_url( 'includes/js/scripts.js...' ), array( 'jquery', 'jquery-form' ), WPCF7_VERSION, $in_footer ); } } add_action( 'wp_enqueue_scripts...plugin_url( 'includes/css/styles.css' ), array(), WPCF7_VERSION, 'all' ); } } 上面的代码假设我们只有一个叫做“contact”的页面添加了联系表单

1.5K1 0

我们应该合并网站上的CSSJS文件吗？

当浏览器需要从源服务器获取页面资产时， TCP链接是为了方便请求和资源的网络传输而开放的。考虑外部CSS/JS文件，渲染块本质上——它们会阻止页面渲染或阻止其他资源下载。...2.页面感知性能可能会受到影响逐步加载的网站通常被认为比最初空白一段时间，然后一次加载所有内容的网站更快。这是因为逐步加载网站会给你的用户提供视觉反馈，你的页面正在运行中。...访问者还可以在页面逐步加载时尽早开始消费内容。如前所述，CSS/JS被认为是渲染阻塞——除非指定，否则浏览器将首先下载、解析和执行此文件，然后再执行页面代码的其余部分。...即使东西在视觉上看起来很好，一些引擎盖下的功能可能已经坏了，你可能要到很久以后才会发现。例如，按钮在页面上不起作用，或页面元素消失，或滑块无法按设计工作，等等。...什么时候合适合并CSS/JS文件您的网站使用HTTP/1.1 你有一个简单的网站，没有太多脚本什么时候不合并CSS/JS文件你的网站使用HTTP/2 你有一个复杂/大型的网站（即，它使用大量脚本和

1.5K2 0

谷歌广告联盟 Google Adsense 使用延迟加载 js 的形式，提升页面打开速度

谷歌广告联盟 Google Adsense 如果按照默认的代码部署，在国内页面有时候加载是挺慢的，会引用很多额外的 js，通过底部放置和 js 延迟加载的方式，能够提升页面加载速度。...# 放到需要展现广告的地方 # body底部引用js js/adsbygoogle.js"> //ad function load_google_ad(){ $("#ad"...document).ready(function(){ setTimeout("load_google_ad()", 3000); }); 代码中 3000 是 3 秒的意思...，这样能实现在页面加载完成后再过 3 秒才请求 AdSense 加载广告，而且根据我的理解这个修改并不违反 “广告实施合作规范 “，需要注意的是，上述代码 {{ ad_client}} 和 {{ ad_slot

1.7K1 0

jQuery页面加载完毕后执行事件

首先最简单的方法。jquery的一种简写形式： alert("页面加载完成！")...jQuery中的页面加载完毕事件，表示的是页面结构被加载完毕。...$(document).ready(function() 只需要在浏览器把所有的HTML放入DOM tree之后就执行js效果，包括在加载外部图片等资源之前。...所以，建议使用方式：样式控制的，比如图片大小控制，使用$(window).load()； jS事件触发的方法，可以在$(document).ready()里面加载。...1、Dom Ready 使用jq时一般都是这么开始写脚本的： $(function(){ // do something }); 例如： $(function() { $("

21.1K4 0

如何避免 JavaScript 模块化中的函数未定义陷阱

早期的 JavaScript 文件通常以全局脚本的形式加载，每个文件中的代码彼此共享全局作用域，容易造成命名冲突和依赖管理混乱。...假设在一个普通的 JavaScript 文件中，我们编写了如下代码，这段代码定义了一个 pageLoad 函数，用于在页面加载时执行一些初始化操作： // script.js function pageLoad...全局变量的问题：为什么普通脚本中的全局变量或函数在模块化后不再可用由于模块的作用域是私有的，导致在普通脚本中定义的全局变量或函数，在模块化后无法直接作为全局对象的一部分被访问。...外部库加载问题问题描述：在普通 JavaScript 文件中，外部库（如 jQuery、Lodash 等）通常通过标签直接加载，并默认附加到全局对象上。...() { console.log('jQuery is ready'); }); 通过全局变量引入：如果外部库必须以非模块化方式加载（例如使用 CDN），可以在模块内显式访问这些全局变量

1251 0

【春节日更】JS延迟加载的几种方式

面试中，经常被问到： “JS延迟加载的几种方式” 今天，我们就来分享下JS延迟加载的方式 JS延迟加载，也就是等页面加载完成之后再加载 JavaScript 文件。...一般有以下几种方式： defer 属性 async 属性动态创建DOM方式使用jQuery的getScript方法使用setTimeout延迟方法让js最后加载 1. defer...HTML5规范要求脚本按照它们出现的先后顺序执行。在现实当中，延迟脚本并不一定会按照顺序执行。 defer属性只适用于外部脚本文件。支持 HTML5 的实现会忽略嵌入脚本设置的 defer属性。...与defer属性类似，都用于改变处理脚本的行为。同样，只适用于外部脚本文件。目的：不让页面等待脚本下载和执行，从而异步加载页面其他内容。异步脚本一定会在页面 load 事件前执行。...使用setTimeout延迟方法 6.让JS最后加载把js外部引入的文件放到页面底部，来让js最后引入，从而加快页面加载速度参考： https://blog.csdn.net/meijory/article

1.9K3 0

Js文件异步加载

Js文件异步加载浏览器中渲染引擎与Js脚本引擎是互斥的，在浏览器开始渲染页面时，如果遇到标签，会停止渲染当前页面，也就是说在脚本加载与执行的过程中会阻塞页面的渲染，在网速较差的环境下可能会出现浏览器页面假死的情况...，这也就是尽量将文件放置于后的原因，Js文件异步加载就是使浏览器加载外部Js脚本文件时不阻塞渲染线程，这称为非阻塞模式加载，当然加载完成之后解析执行Js脚本时必须与渲染引擎互斥...，解析执行Js脚本的时机取决于异步加载Js的方式。...@3/dist/jquery.min.js" > Script DOM Element Script DOM Element的方式即动态插入一个标签来加载外部Js脚本文件...，将其作为onload事件的回调函数，即在页面加载完成后再执行，这样就不会阻塞渲染线程。

10.4K2 0

2 《JavaScript高级程序设计》__ HTML中的JavaScript

浏览器会立即开始下载脚本，这个动作是异步的，不能阻止页面其他动作。...必须是引入外部文件的script上才能使用，也就是必须与src属性同时使用。...上面这段代码会抛出错误，因为上面的script async src=jquery是异步，并不会影响下面的script脚本，并且后面这段script脚本执行时，上面的脚本还未加载完毕。...src 引入外部js文件可选值，引入外部js代码文件。 type 规定内容类型可选值，表示代码块中语言的内容类型（MIME类型）。...noscript标签是在不支持js的浏览器中才生效的，如果支持，则看不到该标签内的内容。

1.1K3 0

前端知识普及之页面加载

在获得数据响应后,页面开始解析,发生的过程为: (1) 解析HTML结构。 (2) 加载外部脚本和样式表文件。 (3) 解析并执行脚本代码。 (4) 构造HTML DOM模型。...(加快解析request) 请求加载数据的优化:页面内容经过 gzip 压缩，静态资源 css/js 等压缩(request到response的优化) ok~ 使用performance测试时间为: /...(2) 加载外部脚本和样式表文件。 (3) 解析并执行脚本代码。 (4) 构造HTML DOM模型。//ready执行 (5) 加载图片等外部文件。 (6) 页面加载完毕。...其实，这和我们将js文件放在body底部，在js上面加async,defer,以及hard Callback异步加载js文件的效果是一样一样的。...使用scrollLeft和scrollTop代替. doScroll 的主要作用是检测DOM结构是否问题，通常我们会使用轮询来检测doScroll是否可用，当可用的时候一定是DOM结构稳定，图片资源还未加载的时候

1.6K9 0

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

首先是外部脚本和行内脚本，对于异步加载的脚本，会导致竞争状态，使得出现未定义的错。...2.Window onload：通过监听window的onload事件来触发行内代码的执行。只要确保外部脚本在window。Onload之前下载执行就可以保持执行顺序。运行结果： ?...2.如果页面有更多的资源，那么外部脚本可能在onload时间出发之前早就完成加载，一般来说，行内脚本最好在外部脚本下载和执行完成之后立即调用。...3.定时器：采用轮询方法来抱着在行内脚本执行之前所依赖的外部脚本已经加载。运行结果： ?...5.降级使用script标签：即用一个标签即包含外部脚本，又使用行内脚本，如下： js/jquery-2.1.1.js " > function test(){

1.8K2 0

在JS中使用强大的CSS选择器来定位页面元素

近期由于受到谷歌退出中国市场的影响，就连之前可以正常使用的翻译 API 也无法使用了。无奈之下为不影响本站的加载速率，决定暂时关闭谷歌的在线翻译功能。...然后又切换到火狐浏览器进行测试，结果还真是加载不出来内容，通过 F12 也快速定位到了的问题，是因为关闭了谷歌在线翻译功能后，按钮的注册事件失败，影响到了后续 JS 脚本的执行。...熟悉 JS 代码的小伙伴应该都清楚这里发生了啥，最简单的修复方式就是在注册点击事件前，加个 if 条件判断，当元素不存在时不进行事件注册。...直接在浏览器终端窗口中使用 JS 语法进行了快速验证，得到的答案是可行的。...相比于 JS 中使用 ID 或名称来定位页面元素的方式，这种使用 CSS 选择器的模式，操作起来会更的加简便和灵活。

621 0

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

这是布兰的第 15 篇原创一个页面允许加载的外部资源有很多，常见的有脚本、样式、字体、图片和视频等，对于这些外部资源究竟是如何影响整个页面的加载和渲染的呢？今天我们来一探究竟。...阅读完这篇文章你将解开如下谜团：如何用 Chrome 定制网络加载速度？图片/视频/字体会阻塞页面加载嘛？ CSS 是如何阻塞页面加载的？ JS 又是如何阻塞页面加载的？...秒过后样式加载完成的时会造成二次渲染，页面重新渲染出该字样，这就说明 CSS 阻塞 DOM 的渲染只阻塞定义在 CSS 后面的 DOM。...DOM 的加载，所以应该将外部 JS 放到的最尾部去加载，减少页面加载白屏时间。.../2.1.4/jquery.min.js') 我是 h1 标签动态插入的脚本在加载完成后会立即执行，这和 async 一致，所以如果需要保证多个插入的动态脚本的执行顺序

2.1K3 0

献给前端求职路上的你们（下）

JavaScript的作用域指的是变量的作用范围，内部作用域由函数的形参，实参，局部变量，函数构成，内部作用域和外部的作用域一层层的链接起来形成作用域链，当在在函数内部要访问一个变量的时候，首先查找自己的内部作用域有没有这个变量...，如果没有就到这个对象的原型对象中去查找，还是没有的话，就到该作用域所在的作用域中找，直到到window所在的作用域，每个函数在声明的时候就默认有一个外部作用域的存在了，代码如下： var t=4;function...*jQuery是一个js库，主要提供的功能是选择器，属性修改和事件绑定等等。 *jQuery UI则是在jQuery的基础上，利用jQuery的扩展性，设计的插件。...（6）避免使用CSS Expression（css表达式)又称Dynamic properties(动态属性)。（7）图片预加载，将样式表放在顶部，将脚本放在底部加上时间戳。...（8）避免在页面的主体布局中使用table，table要等其中的内容完全下载之后才会显示出来，显示比div+css布局慢。 http状态码有那些？分别代表是什么意思？

1.1K6 0

如何使用Mantra在JS文件或Web页面中搜索泄漏的API密钥

关于Mantra Mantra是一款功能强大的API密钥扫描与提取工具，该工具基于Go语言开发，其主要目标就是帮助广大研究人员在JavaScript文件或HTML页面中搜索泄漏的API密钥。...Mantra可以通过检查网页和脚本文件的源代码来查找与API密钥相同或相似的字符串。这些密钥通常用于对第三方API等在线服务进行身份验证，而且这些密钥属于机密/高度敏感信息，不应公开共享。...通过使用此工具，开发人员可以快速识别API密钥是否泄漏，并在泄漏之前采取措施解决问题。...除此之外，该工具对安全研究人员也很有用，他们可以使用该工具来验证使用外部API的应用程序和网站是否充分保护了其密钥的安全。...总而言之，Mantra是一个高效而准确的解决方案，有助于保护你的API密钥并防止敏感信息泄露。工具下载由于该工具基于Go语言开发，因此我们首先需要在本地设备上安装并配置好Go语言环境。

3112 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭