如何用PhantomJS中的遠程JavaScript代替DOM節點

我是PhantomJS和JavaScript的新手，如果有簡單的解決方案，請原諒我。如何用PhantomJS中的遠程JavaScript代替DOM節點

我使用PhantomJS做的網站截圖，我想從一個遠程JavaScript替換動態內容一定DOM節點，這樣的事情：

<script language="JavaScript" src="http://server/dynamic.js" type="text/javascript"></script>

我第一次嘗試：

var page = require('webpage').create(); 

page.open('http://stackoverflow.com', function (status) { 
    if (status !== 'success') { 
     phantom.exit(); 
    } 

    page.evaluate(function() { 

     //// Case #1: what I really want 
     // var s = '<script language="JavaScript" src="http://server/dynamic.js" type="text/javascript"></script>'; 

     //// Case #2: simple js test case 
     // var s = '<script language="JavaScript" type="text/javascript">document.write("<p>THIS IS A TEST</p>");</script>'; 

     //// Case #3: very simple case 
     var s = '<b>THIS IS A TEST</b>'; 

     var node = document.getElementById('mainbar'); 
     var pnode = node.parentNode; 

     var newele = document.createElement('div'); 
     newele.innerHTML = s; 

     pnode.replaceChild(newele, node); 
    }); 

    page.render('test.jpg'); 

    phantom.exit(); 
});

對於簡單的情況（案例＃3），我只是用一些文本替換它，它可以正常工作，但不適用於任何一種javascript情況。看起來javascript在通過replaceChild（）插入後沒有被評估。我在page.render（）之前嘗試了page.reload（），但它沒有幫助。

接下來，我嘗試使用iframe中創建新的元素：

var newele = document.createElement('iframe'); 
newele.setAttribute('src', 'javascript:document.write("<p>THIS IS A TEST</p>");');

這適用於簡單的JS測試案例＃2，但我無法弄清楚如何使iframe的工作，我真正想要的（情況1）。

有什麼建議嗎？

來源

2013-08-07 James Schroedinger

我想出了一個可行的解決方案：

var newele = document.createElement('iframe'); 
newele.setAttribute('src', 'javascript:document.write("<script src=\'http://server/dynamic.js\'></script>");');

我也只好放一點延遲：

window.setTimeout(function() { 
    page.render('test.jpg'); 
    phantom.exit(); 
}, 500);

這工作，但感覺有點klugy給我。我很想聽到更好的解決方案。

來源

2013-08-09 22:09:31

不，您可以將您的JavaScript引用到這樣的頁面，右鍵調用評估第一時間（節選）前：

... 
     page.open(url, function (status) { 
      if (status !== 'success') { 
       console.log('Error: Cannot load url. Status: {0}.'.format(status)); 
       phantom.exit(1); 
      } else { 
       page.injectJs('../../../code/common/jquery.min.js'); 
       // call evaluate once to change the dropdown: 
       page.evaluate(function (myobj) { 
         // manipulate DOM here with jquery, or whatever you want. 
       }, myobj); 
...

請注意，您可以撥打評估幾次，這樣你就可以提取來自頁面的內容，從頁面調用JavaScript函數，修改DOM等。

來源

2014-07-18 22:43:44 woohoo

如何用PhantomJS中的遠程JavaScript代替DOM節點

回答

相關問題