1. 首頁
  2. 問答
  3. 通過Chrome擴展內容腳本在iFrame中激活Zurb基金會的Joyride

通過Chrome擴展內容腳本在iFrame中激活Zurb基金會的Joyride

2015-09-07 50 views
1

我正在構建一個Chrome擴展程序，該程序可在任何HTML頁面（即在瀏覽器窗口中查看任何頁面）內創建iFrame。通過Chrome擴展內容腳本在iFrame中激活Zurb基金會的Joyride

iFrame通過Chrome擴展程序的內容腳本「注入」HTML頁面。生成的HTML看起來像這樣：

<html> 
    <head>..</head> 
    <body>..</body> 
    <iframe id="myIframe">...</iframe> 
</html>

後的內容腳本添加到主頁面的DOM它繼續通過操縱自己的DOM來填充內容的iframe內嵌框架。我使用Zurb CSS來設置iframe內容的樣式。

而這一切工作正常。

我現在正試圖將Zurb Joyride添加到iframe的內容中，這是我無法工作的原因。

我的清單的content_scripts聲明如下所示：

"content_scripts": [{ 
    "matches": ["*://*/*"], 
    "js":   ["js/externalJS/jquery-2.1.4.min.js", 
        "js/externalJS/foundation.min.js", 
        "js/content_script.js"], 
    "run_at":  "document_end" 
}],

我懷疑本身需要有機會獲得Zurb腳本的iframe，所以還有foundation.min.js由清單被加載的一部分擴展名，我的內容腳本還在iframe中添加了相關標籤（通過操作DOM）。我的理解是，iframe中的關鍵要素是：

  • 標籤Zurb JS文件
  • 將對象兜風重視（ID =「testjoyride」）
  • 的兜風內容本身
  • 初始化調用基金會（）

因此，考慮到這一點，我有清單的web_accessible_resources聲明看起來像這樣：

"web_accessible_resources": [ 

    "js/externalJS/jquery-2.1.4.min.js", 
    "js/externalJS/vendor/modernizr.js", 
    "js/externalJS/vendor/fastclick.js", 
    "js/externalJS/foundation.min.js", 
    "css/foundation.css", 
    "css/app.css" 
],

然後使用內容腳本建立起來的iframe中下面的HTML：

<iframe id="myIframe"> 
    <html> 
    <head> 

     <!-- the foundation style sheet (which works fine already) --> 
     <link type="text/css" rel="stylesheet" href="chrome-extension://extension_id/css/foundation.css"> 

     <!-- the first two scripts --> 
     <script src="chrome-extension://extension_id/js/externalJS/vendor/modernizr.js"></script> 
     <script src="chrome-extension://extension_id/js/externalJS/jquery-2.1.4.min.js"></script> 

    </head> 

    <body> 

     <!-- a test object to attach the joyride too --> 
     <input type="submit" id="testjoyride"> 

     <!-- now the rest of the iframe content --> 
     ... content ... 

     <!-- the other two scripts --> 
     <script src="chrome-extension://extension_id/js/externalJS/vendor/fastclick.js"></script> 
     <script src="chrome-extension://extension_id/js/externalJS/foundation.min.js"></script> 

     <!-- default joyride code from foundation.zurb.com --> 
     <ol class="joyride-list" data-joyride=""> 
     <li data-id="testjoyride" data-class="custom so-awesome" data-text="Next" data-prev-text="Prev">  
     <h4>Stop #1</h4>  
     </li> 
     <li data-button="end" data-prev-text="Prev"> 
      <h4>Stop #3</h4> 
     </li> 
     </ol> 

    </body> 
    </html> 
</iframe>

然後，最後，當所有上述內容連接到IFRAME（和IFRAME，當然，附加到父頁面的DOM）我從content_script調用foundation（）。我想我需要這樣稱呼它： $（window.frames.myIframe.contentWindow.document）.foundation（'joyride'，'start'）;

即通過在iframe的文檔對象，不是父頁面**

所以我做了這一切，並沒有任何反應。兜風不會出現，HTML也不會轉換爲自動生成的輸出（如here所述）。

我在一個簡單的HTML頁面中創建了一個測試用例，它工作正常，我試圖將該測試頁移動到iframe中，並且蹣跚學步停止工作。因此，我懷疑，儘管沒有多少信心，問題在於iframe，而不是Chrome擴展。

**注意，我把這個調用放在所有DOM操作的末尾。將我創建的新HTML添加到iframe的DOM之後，並在創建完所有聽衆之後，等等。因此，我相信腳本和joyrides應該是「那裏」。但是，如果我在調用基礎（'joyride'，'start'）之前粘貼alert（），則警報會顯示一個空的iframe，並且只有在我關閉警報後纔會填充iframe。不管這很重要，還是隻是一個奇怪的警報效果，我都不知道。

來源

2015-09-07 Brian

+0

暗示您在您的內容腳本中創建iframe嘗試使用'window.postMessage'向您的iframe腳本發送一個事件（[示例]（https://viget.com/extend/using-javascript-postmessage-to-talk ）在此之前，在iframe中插入一個額外的簡單腳本，並在該消息的偵聽器中調用'foundation（'joyride'，'start'）;'。或者使用chrome API來交換消息，但這可能會更麻煩一些。 – wOxxOm

+0

就是這樣！ 3我不明白的事情：1）正如你所說，@ wOxxOm，從iframe調用'foundation（'joyride'，'start'）'是答案。但是爲什麼從內容腳本（通過iframe文檔）調用它不起作用？ 2）如果我只是使用'innerHTML + ='

相關問題

 相關問題