请问,为什么 puppeteer 向页面注入 jquery 代码, jquery 却不能立即起作用?

2019-07-18 10:18:29 +08:00
 hgjian

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);
		
})();
6427 次点击
所在节点    Node.js
27 条回复
hgjian
2019-07-18 10:18:50 +08:00
console.log( "window.$ !== undefined JQ:" + watchDog ) ; // 应该显示 true ;实际测试却显示 false ;但是,浏览器运行打开网页后,在控制面板测试,就显示为 true 了 ;
2DaYe
2019-07-18 12:23:40 +08:00
jQuery 库引用晚了吧?页面都 load 完了再引,jQuery 就没法初始化了吧?
hgjian
2019-07-18 12:35:34 +08:00
@2DaYe 请问怎么解决啊?
learnshare
2019-07-18 12:39:43 +08:00
const page = await browser.newPage();

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

await page.goto()
hgjian
2019-07-18 12:43:19 +08:00
@learnshare 安装 jq 库?
hgjian
2019-07-18 15:07:44 +08:00
@learnshare 你好,我按照你的代码试了一下,还是不行哦
learnshare
2019-07-18 16:00:10 +08:00
@hgjian 大概你测试的网站不允许 jQuery,测试本站是可以的

https://gist.github.com/LearnShare/2af03a1d6bcb41a9ec81b51e25435e3d
hgjian
2019-07-18 16:06:57 +08:00
@learnshare 应该是可以的吧,puppeteer 打开 chrome 浏览器运行网页后,jquery 就生效了 ;
learnshare
2019-07-18 16:13:50 +08:00
@hgjian 但实际测下来就是没有 $
hgjian
2019-07-18 16:26:56 +08:00
@learnshare 那好奇怪啊,在浏览器控制台执行 window.$(".city-current").innerText 可以取得结果
hgjian
2019-07-18 16:27:42 +08:00
我中间有成功过一次,后来改乱了,不知道成功的代码是什么样的了,
Melting
2019-07-18 17:17:20 +08:00
好像是因为 http 的关系,而且话说 chrome 命令行也有$这个命令,可能冲突了
hgjian
2019-07-18 17:25:44 +08:00
@Melting 有什么解决办法吗?
hgjian
2019-07-18 17:26:26 +08:00
@Melting 或者也没有什么办法可以判断页面的 js 是不是全部执行完毕了啊?
shinpei
2019-07-18 20:22:38 +08:00
这个就涉及到 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 ) {...}
shinpei
2019-07-18 20:26:35 +08:00
简单点就是你去修改下 jquery 源码,把 if (!noGlobal) 判断去掉
hgjian
2019-07-18 20:48:28 +08:00
@shinpei 感谢
hgjian
2019-07-18 20:54:55 +08:00
@shinpei 请问,去掉判断以后,那 jq 没有全局注册,怎么调用 jq 呢?
hgjian
2019-07-18 20:56:20 +08:00
@shinpei 直接使用 jQuery ?
hgjian
2019-07-18 20:58:01 +08:00
@shinpei 请问有没有不修改 jq 源码 的 方法呢?

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/584021

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX