web-dev-qa-db-ja.com

人形のページにjqueryを挿入する

Document.querySelectorがjqueryをカットしないため、jqueryをパペットページに挿入しようとしています。

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;
}

その結果、ほとんどがタイムアウトになります。誰にも解決策がありますか？

jquerynode.jspuppeteer
17
pguardiario

page.addScriptTagを使用してjsファイルを挿入しました。

...
await page.addScriptTag({url: 'https://code.jquery.com/jquery-3.2.1.min.js'})
...

page.addScriptTag -ドキュメント

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();
})();
32
nilobarp

JQueryのローカルコピーを挿入する場合：

await page.addScriptTag({path: require.resolve('jquery')})

14
subeebot

私はこれをやっています：

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();
});
10
Tudor Morar

これは私のために動作します。

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;
    }
4
TDreama

一部のサイトではスクリプトタグの挿入が許可されていないため、許可する前にそのコンテンツを挿入する必要があります。その場合は、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);

これは browserless here （私はこのツールの作成者です）の操り人形のドキュメントをスクレイピングする際に使用されます。

2
browserless

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);

ローカル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);
0
Obinwanne Hill

このようになった場合、htmlページヘッダーにスクリプトを挿入すると、管理がより簡単になります。

<script type="text/javascript" src="abc.min.js"></script>

そして、あなたはpage.evaluate（function（）{}）

0
Ahsam Aslam