请问，为什么 puppeteer 向页面注入 jquery 代码后，Nodejs 环境下 jquery 却不能立即起作用？

请问，为什么 puppeteer 向页面注入 jquery 代码后，Nodejs 环境下 jquery 却不能立即起作用？

const puppeteer = require(‘puppeteer’);

void(async () => {
	
		const browser = await puppeteer.launch({
			headless: false,
			devtools: true
		});
		
		const page = await browser.newPage();
		
		const UA = "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/77.0.3835.0 Safari/537.36";  //  UserAgent   ；
		
		await Promise.all ( [
			page.setUserAgent ( UA ) , 		
			page.setJavaScriptEnabled ( true ) ,	//  允许执行 js 脚本										
		] ) ;  
		
		await page.goto( "http://www.gewara.com/" , { waitUntil : "networkidle0" ,  timeout : 3600000 } ) ;		
		
		await page
			.mainFrame()
			.addScriptTag({
			url: 'https://code.jquery.com/jquery-3.4.1.min.js'
		});
		
		await page.waitFor(2000);
		
		page.on( 'console' , msg => console.log( "var result = await page.evaluate( ( ) =>{  ***  函数内的 console.log：" , msg.text() ) );		
		
		const result = await page.evaluate(() => {
				const watchDog = ( window.$ !== undefined );
				console.log( "window.$ !== undefined    JQ：" + watchDog ) ;  //  应该显示  true ；实际测试却显示  false ；但是，浏览器运行打开网页后，在控制面板测试，就显示为 true 了 ；	  
				return 
		});
		
		console.log(result);
		
})();

28 回复

console.log( “window.$ !== undefined JQ：” + watchDog ) ; // 应该显示 true ；实际测试却显示 false ；但是，浏览器运行打开网页后，在控制面板测试，就显示为 true 了 ；


jQuery 库引用晚了吧？页面都 load 完了再引，jQuery 就没法初始化了吧？

请问怎么解决啊？

const page = await browser.newPage();

await page.addScriptTag({
path: ‘./node_modules/jquery/dist/jquery.js’,
});

await page.goto()

安装 jq 库？

你好，我按照你的代码试了一下，还是不行哦

大概你测试的网站不允许 jQuery，测试本站是可以的

https://gist.github.com/LearnShare/2af03a1d6bcb41a9ec81b51e25435e3d

应该是可以的吧，puppeteer 打开 chrome 浏览器运行网页后，jquery 就生效了 ；

但实际测下来就是没有 $

那好奇怪啊，在浏览器控制台执行 window.$(".city-current").innerText 可以取得结果

我中间有成功过一次，后来改乱了，不知道成功的代码是什么样的了，

好像是因为 http 的关系，而且话说 chrome 命令行也有$这个命令，可能冲突了

有什么解决办法吗？

或者也没有什么办法可以判断页面的 js 是不是全部执行完毕了啊？

这个就涉及到 jQuery 源码的问题了；

jquery 在代码尾部全局注册：
if ( !noGlobal ) {
window.jQuery = window.$ = jQuery;
}


// 这个是开始的代码，由于这个网站 module 是存在的，所以 noGlobal 为 true,
( function( global, factory ) {

“use strict”;

if ( typeof module === “object” && typeof module.exports === “object” ) {

// For CommonJS and CommonJS-like environments where a proper window
// is present, execute the factory and get jQuery.
// For environments that do not have a window with a document
// (such as Node.js), expose a factory as module.exports.
// This accentuates the need for the creation of a real window.
// e.g. var jQuery = require(“jquery”)(window);
// See ticket #14549 for more info.
module.exports = global.document ?
factory( global, true ) :
function( w ) {
if ( !w.document ) {
throw new Error( “jQuery requires a window with a document” );
}
return factory( w );
};
} else {
factory( global );
}

// Pass this if window is not defined yet
} )( typeof window !== “undefined” ? window : this, function( window, noGlobal ) {…}

简单点就是你去修改下 jquery 源码，把 if (!noGlobal) 判断去掉

感谢

请问，去掉判断以后，那 jq 没有全局注册，怎么调用 jq 呢？

直接使用 jQuery ?

请问有没有不修改 jq 源码 的 方法呢？

我的意思是把
if ( !noGlobal ) {
window.jQuery = window.$ = jQuery;
}
直接写成
window.jQuery = window.$ = jQuery;

刚刚试过，好像不行

搞定了，
await page.addScriptTag({
path: ‘./node_modules/jquery/dist/jquery.js’,
});
应该放在 page.goto 的后面，就可以了

谢谢啊

不客气

根本不需要 jq 吧

cheerio 就是服务端的 jQuery

了解了，谢谢啊

在Node.js环境下，使用Puppeteer向页面注入jQuery代码后，jQuery不能立即起作用的原因通常与jQuery的加载和执行环境有关。以下是一些可能的原因及解决方案：

  1. jQuery加载问题：

    • 确保jQuery脚本正确加载到页面中。可以通过检查Puppeteer的page.content()或使用浏览器的开发者工具来验证。

  2. 执行环境问题：

    • jQuery依赖于浏览器的window和document对象，这些对象在Node.js环境中不存在。但Puppeteer控制的是无头浏览器，理论上应支持这些对象。
    • 确保Puppeteer已正确设置并启用了JavaScript执行。

  3. jQuery源码中的条件判断：

    • jQuery源码中有条件判断，可能会阻止其在某些环境下全局注册$符号。例如，如果检测到module对象存在，jQuery可能不会将$绑定到window对象。
    • 可以通过修改jQuery源码或等待页面完全加载后再执行jQuery代码来解决。

以下是一个示例代码，展示如何使用Puppeteer向页面注入jQuery并执行：

javascript
const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('http://example.com');
  await page.addScriptTag({url: 'https://code.jquery.com/jquery-3.6.0.min.js'});
  await page.waitForTimeout(2000); // 等待jQuery加载
  const result = await page.evaluate(() => {
    return window.$ !== undefined; // 检查$是否已定义
  });
  console.log(result); // 应该输出true
  await browser.close();
})();

如果上述代码中的result为false，请检查网络请求和jQuery的加载状态。

回到顶部