使用PhantomJS的網頁生成警告，但工程

我試圖通過嵌入所有圖像（和其他外部資源，一旦我通過了這一點）的網頁轉換成一個單一的文件中嵌入所有圖像。下面是我如何運行PhantomJs：使用PhantomJS的網頁生成警告，但工程

./phantomjs --web-security=false ./embed_images.js http://localhost/index.html > output.txt

而這裏的embed_images.js：

var page = require('webpage').create(), 
    system = require('system'), 
    address; 

if (system.args.length === 1) { 
    console.log('Usage: embed_images.js <some URL>'); 
    phantom.exit(1); 
} 
else { 
    page.onConsoleMessage = function(msg) { 
     console.log(msg); 
    }; 
    address = system.args[1]; 
    page.open(address, function(status) { 
     page.evaluate(function() { 
      function embedImg(org) { 
       var img = new Image(); 
       img.src = org.src; 
       img.onload = function() { 
        var canvas = document.createElement("canvas"); 
        canvas.width = this.width; 
        canvas.height = this.height; 

        var ctx = canvas.getContext("2d"); 
        ctx.drawImage(this, 0, 0); 

        var dataURL = canvas.toDataURL("image/png"); 

        org.src = dataURL; 
        console.log(dataURL); 
       } 
      } 
      var imgs = document.getElementsByTagName("img"); 
      for (var index=0; index < imgs.length; index++) { 
       embedImg(imgs[index]); 
      } 
     }); 
     phantom.exit() 
    }); 
}

當我運行上面所提到的命令，它會導致這樣的文件：

Unsafe JavaScript attempt to access frame with URL from frame with URL file://./embed_images.js. Domains, protocols and ports must match. 
Unsafe JavaScript attempt to access frame with URL about:blank from frame with URL file://./embed_images.js. Domains, protocols and ports must match.

有多個實例上面的錯誤消息。要測試什麼是錯的，我跑了下面的代碼在我的鉻控制檯：

function embedImg(org) { 
    var img = new Image(); 
    img.src = org.src; 
    img.onload = function() { 
     var canvas = document.createElement("canvas"); 
     canvas.width = this.width; 
     canvas.height = this.height; 

     var ctx = canvas.getContext("2d"); 
     ctx.drawImage(this, 0, 0); 

     var dataURL = canvas.toDataURL("image/png"); 

     org.src = dataURL; 
     console.log(dataURL); 
    } 
} 
var imgs = document.getElementsByTagName("img"); 
for (var index=0; index < imgs.length; index++) { 
    embedImg(imgs[index]); 
}

而且它工作得很好（我的網頁不引用任何跨域圖像）！它會將所有圖像嵌入到HTML頁面中。有誰知道問題是什麼？

這是我的index.html文件的內容：

<!DOCTYPE html > 
<html> 
<head> 
<meta charset="utf-8" /> 
</head> 

<body> 
<img src="1.png" > 
</body> 
</html>

與實際輸出（output.txt）：

Unsafe JavaScript attempt to access frame with URL from frame with URL file://./embed_images.js. Domains, protocols and ports must match. 

Unsafe JavaScript attempt to access frame with URL from frame with URL file://./embed_images.js. Domains, protocols and ports must match. 

Unsafe JavaScript attempt to access frame with URL about:blank from frame with URL file://./embed_images.js. Domains, protocols and ports must match. 

Unsafe JavaScript attempt to access frame with URL about:blank from frame with URL file://./embed_images.js. Domains, protocols and ports must match. 

Unsafe JavaScript attempt to access frame with URL about:blank from frame with URL file://./embed_images.js. Domains, protocols and ports must match. 

Unsafe JavaScript attempt to access frame with URL about:blank from frame with URL file://./embed_images.js. Domains, protocols and ports must match. 

Unsafe JavaScript attempt to access frame with URL about:blank from frame with URL file://./embed_images.js. Domains, protocols and ports must match. 

Unsafe JavaScript attempt to access frame with URL about:blank from frame with URL file://./embed_images.js. Domains, protocols and ports must match. 

Unsafe JavaScript attempt to access frame with URL about:blank from frame with URL file://./embed_images.js. Domains, protocols and ports must match. 

Unsafe JavaScript attempt to access frame with URL about:blank from frame with URL file://./embed_images.js. Domains, protocols and ports must match. 

Unsafe JavaScript attempt to access frame with URL about:blank from frame with URL file://./embed_images.js. Domains, protocols and ports must match.

奇怪的是，雖然我有我的網頁上只有一個圖像，有無數的錯誤信息！我使用phantomjs-1.9.8-linux-x86_64。

來源

2014-10-28 Mehran

也許它與此有關：http://stackoverflow.com/q/26424765 – 2014-10-28 12:41:32

錯誤屬於'toDataURL'調用，因爲它在您提到的帖子中指出。但是我不能確定它們是否都一樣，因爲它們都在討論SVG，而我的只有一個PNG圖像。 – Mehran 2014-10-28 12:53:48

如果在'setTimeout（function（）{/ * HERE * /}，2000）''page.open'回調中包裝所有內容會發生什麼情況;'？ – 2014-10-28 18:00:20

當調用phantom.exit時會打印這些通知。它們不會造成任何麻煩，但在需要乾淨的PhantomJS輸出時不好。你的情況，你可以通過「asynchronizing」 phantom.exit這樣抑制通知：

setTimeout(function(){ 
    phantom.exit(); 
}, 0);

我認爲發生這種情況的原因是因爲一個大的字符串是從頁面上下文過去了幻象試圖退出。

我爲此創建了一個github issue。

來源

2014-11-01 09:56:18

你把這個放在哪裏？在腳本的末尾？ – Optimus 2015-09-22 12:53:39

@Optimus當你通常要調用'phantom.exit（）'時，你可以用'setTimeout（）'來包裝那個調用。它是*在腳本*的末尾，但前提是考慮執行而不是實際的代碼行。 – 2015-09-22 12:56:20

使用PhantomJS的網頁生成警告，但工程

回答

相關問題