Javascript 将 jQuery 注入 Puppeteer 页面
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/46987516/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Inject jQuery into Puppeteer page
提问by pguardiario
I'm trying to inject jQuery into my Puppeteer page because document.querySelectordoesn't cut it for me:
我正在尝试将 jQuery 注入我的 Puppeteer 页面，因为document.querySelector它不适合我：
async function inject_jquery(page){
await page.evaluate(() => {
var jq = document.createElement("script")
jq.src = "https://code.jquery.com/jquery-3.2.1.min.js"
document.querySelector("head").appendChild(jq)
})
const watchDog = page.waitForFunction('window.jQuery !== undefined');
await watchDog;
}
The result is it mostly times out. Does anyone have a solution?
结果是它主要超时。有没有人有办法解决吗？
回答by nilobarp
I have used page.addScriptTagto inject jsfiles.
我曾经page.addScriptTag注入js文件。
...
await page.addScriptTag({url: 'https://code.jquery.com/jquery-3.2.1.min.js'})
...
page.addScriptTag- documentation
Working example using puppeteer: 0.12.0
工作示例使用 puppeteer: 0.12.0
import { launch } from 'puppeteer'
(async () => {
const browser = await launch({headless: false});
const page = await browser.newPage();
await page.goto('https://example.com', {waitUntil: 'networkidle'});
await page.addScriptTag({url: 'https://code.jquery.com/jquery-3.2.1.min.js'});
await page.close();
await browser.close();
})();
回答by subeebot
For those looking to inject a local copy of jQuery:
对于那些希望注入本地 jQuery 副本的人：
await page.addScriptTag({path: require.resolve('jquery')})
await page.addScriptTag({path: require.resolve('jquery')})
回答by Tudor Morar
I am doing this:
我正在这样做：
await page.addScriptTag({ url: 'https://code.jquery.com/jquery-3.2.1.min.js' });
const title = await page.evaluate(() => {
const $ = window.$; //otherwise the transpiler will rename it and won't work
return $('h1 > span').text();
});
回答by TDreama
This works for me.
这对我有用。
async function inject_jquery(page){
await page.evaluate(() => {
var jq = document.createElement("script")
jq.setAttribute('type','text/javascript');
jq.src = "https://code.jquery.com/jquery-3.2.1.min.js"
return new Promise( (resolve) => {
jq.addEventListener("load", ()=> {
resolve();
});
document.getElementsByTagName("head")[0].appendChild(jq);
});
})
const watchDog = page.waitForFunction('window.jQuery !== undefined');
await watchDog;
}
回答by browserless
Some sites won't allow you to inject a script tag, so you'll have to inject the contents of it before it'll allow you to do so. If that's the case you can use the evaluatemethod to grab the scripts contents from a CDN and inject them manually:
某些站点不允许您注入脚本标记，因此您必须先注入它的内容，然后才能允许您这样做。如果是这种情况，您可以使用该evaluate方法从 CDN 中获取脚本内容并手动注入它们：
const jquery = await page.evaluate(() => window.fetch('https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js').then((res) => res.text()));
await page.goto(YOUR_PAGE_HERE);
await page.evaluate(jquery);
This is used in scraping puppeteer's docs for browserless here(I'm the author of this tool) if you'd like to see an example in the wild.
回答by Uriel
I had just publish my puppeteer jquery integration here
我刚刚在这里发布了我的 puppeteer jquery 集成
code sample:
代码示例：
let browser = await launch({headless: true});
let pageOrg = await browser.newPage();
let page = pageExtand(pageOrg);
// append a <H1>
await page.jQuery('body').append(`<h1>Title</h1>`);
// get the H1 value
let title = await page.jQuery('h1').text();
// chain calls
let text = await page.jQuery('body button:last')
.closest('div')
.find('h3')
.css('color', 'yellow')
.parent()
.find(':last')
.text();
Not all jQuery function are mapped yet, so open issue if you need some more function (Each call need to be add by name and with the number of parameter they take).
并非所有 jQuery 函数都已映射，因此如果您需要更多函数，请打开问题（每个调用都需要按名称和它们采用的参数数量添加）。
回答by Grant Miller
You can use the following method to add jQuery to the page using page.evaluate():
您可以使用以下方法将 jQuery 添加到页面中page.evaluate()：
await page.evaluate(async () => {
const script = document.createElement('script');
script.src = 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js';
const promise = new Promise((resolve, reject) => {
script.onload = resolve;
script.onerror = reject;
});
document.head.appendChild(script);
await promise;
});
回答by Ahsam Aslam
It becomes more easier to manage if you inject your script into the your html page header if you have got like this
如果您像这样将脚本注入到 html 页面标题中，则管理起来会更容易
<script type="text/javascript" src="abc.min.js"></script>
and now you can easily call its function in your page.evaluate(function(){ })
现在你可以在你的页面中轻松调用它的函数。evaluate(function(){ })
回答by Obinwanne Hill
To inject jQuery from CDN (inspired by @browserless answer above):
从 CDN 注入 jQuery（灵感来自上面的@browserless 答案）：
// go to page
await page.goto(url_str);
// inject jQuery
var jquery_ev_fn = await page.evaluate(function(){
return window.fetch('https://code.jquery.com/jquery-3.4.1.min.js').then(function(res){
return res.text();
});
});
await page.evaluate(jquery_ev_fn);
To inject local jQuery:
注入本地 jQuery：
// get local jQuery
var jquery_code_str = fs.readFileSync('/path/to/local/jquery.js', 'utf8');
// go to page
await page.goto(url_str);
// inject jQuery
var jquery_ev_fn = await page.evaluate(function(code_str){
return code_str;
}, jquery_code_str);
await page.evaluate(jquery_ev_fn);
