插入一個div和腳本到一個頁面上的iframe

Question

我有一個頁面上有一個iframe，我正在使用jQuery試圖添加一個額外的腳本到iframe和一個空的div在最後。

的iframe代碼：

<iframe class="kaltura" style="width: 608px; height: 402px;" title="EPI-522_Orav_Survival_Review_Part 1_Study Elements-H264 MP4 2Mbit 16x9 [22:17]" src="/courses/2873/external_tools/retrieve?borderless=1&amp;url=https://hsphprod.kaf.kaltura.com/browseandembed/index/media/entryid/1_rs4bvlrn/showDescription/false/showTitle/false/showTags/false/showDuration/false/showOwner/false/showUploadDate/false/playerSize/608x402/playerSkin/30101351/" width="300" height="150" allowfullscreen="allowfullscreen" webkitallowfullscreen="webkitallowfullscreen" mozallowfullscreen="mozallowfullscreen"></iframe> 

到目前爲止，腳本我有是：

jQuery(document).ready(function ($) { 
    // for each of the kaltura iframes 
    $('.kaltura').each(function (index) { 
     // find the body and add these items after 
     $(this).contents().find('body').append('<div id="threeplay-div"></div>'); 
     // create the script element and insert it into the page 
     $(this).contents().find('#threeplay-div').append($("<script />", { 
      type: "text/javascript", 
      async: true, 
      src: "//static.3playmedia.com/p/projects/11439/files/831301/plugins/10616.js" 
     })); 
    }); 
}); 

，但運行時它不檢測I幀，也沒有追加股利或腳本到它。任何人有一個想法如何得到這個工作？

Answer 1

您的iframe內容可能尚未加載到document.ready上。您應該在iframe加載時附加回調。像這樣$（iframe）.on（'load'，callback）;

如果iframe src與您的域名不同，那麼您無法從您的代碼訪問iframe內容。這就是瀏覽器向外部加載的文檔提供的安全性。

見問題的答案：
Replacing HTML within an iframe jquery

Answer 2

您提供不附加內iframediv和script樣品，而是附加在只在當前窗口的div。示例代碼（如下所示）在iframe內附加script標記，jquery用於創建script標記。

jQuery(document).ready(function ($) { 
     // for each of the kaltura iframes 
     $('iframe.class').each(function (index) { 
       // find the body and add these items after 
       $(this).contents().find('body').append('<div id="inserted-div"></div>'); 
       // create the script element and insert it into the page 
        $(this).contents().find('#inserted-div').append($("<script />", { 
        type: "text/javascript", 
        //src : src, 
        async: true, 
        src: "//www.example.com/javascript.js" 
       })); 
     }); 
}); 

試試這個jsfiddle例子，用f12（開發人員工具）來驗證。