如何將JavaScript文件注入WebEngineView頁面？

一旦它完全加載到WebEngineView中，我將爲網頁添加腳本標記，但它以某種方式默默無聞。如何將JavaScript文件注入WebEngineView頁面？

var s = document.createElement('script'); 
s.src = "qrc:/jquery-2.1.4.min.js"; 
document.body.appendChild(s);

這完全標準，在一定程度上能夠正常運行，也就是說，如果我查看該頁面的html源，腳本標籤：

我用這個代碼調用webview.runJavaScript注入腳本確實已附加到身體。

問題是腳本沒有被下載，或者沒有被評估，或者什麼。我所知道的是在上面的例子中，jQuery函數不可用。如果我加載一個帶有一個全局變量的小型JavaScript測試文件，那麼該變量也不可用。將url更改爲http而不是qrc並將其指向Web服務器沒有任何區別。

注入img標籤正常工作;圖像被加載並顯示。

但JavaScript以某種方式被破壞。有誰知道如何解決這一問題？

來源

2015-06-29 WaltPurvis

它看起來像問題不是與腳本本身，但與什麼應該運行腳本，它是鏈接到一個按鈕或其他事件？ – Marco

謝謝你的評論 - 它讓我找到了正確的解決方案。該腳本正在從webview的信號中運行，即該頁面已完成加載。當我把腳本分成三個獨立的部分並將它們附加到三個不同的按鈕時，它就起作用了，這讓我意識到這是異步調用/函數執行速度太快的問題。這引導我到下面發佈的解決方案。 – WaltPurvis

問題與QML和JavaScript的異步本質有關。

我插入了一個腳本標籤來注入jQuery，然後我調用了一個函數來解除插入版本的jQuery與任何版本的jQuery可能已經在原始頁面中的衝突。

但我相信在調用去衝突函數之前，webview並沒有完成解析插入的jQuery庫，所以失敗了。（我對瀏覽器編程不是很熟悉，或者我可能從一開始就懷疑過這種情況。）

解決方法是插入帶少量JavaScript插入腳本標記，然後設置超時等待200ms在調用去衝突函數之前。像這樣：

function insertAuhJQuery(){ 
var s = document.createElement("script"); 
s.src = "qrc:/jquery-2.1.4.min.js"; 
document.body.appendChild(s); 
window.setTimeout(deConflictJQuery, 200); 
} 

function deConflictJQuery(){ 
auh = {}; 
auh.$ = jQuery.noConflict(true); 
} 

insertAuhJQuery()

這工作可靠，可以接受我的目的。

來源

2015-06-30 14:53:41 WaltPurvis

如何將JavaScript文件注入WebEngineView頁面？

回答

相關問題