Javascript 在页面的iframe中插入div和脚本

我有一个页面上有一个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"
        }));
    });
});

jQuery（文档）.ready（函数（$）{
//对于每个kaltura Iframe
$（'.kaltura'）。每个（函数（索引）{
//找到正文并在后面添加这些项目
$（this.contents（）.find（'body'）.append（''）；
//创建脚本元素并将其插入页面
$（this）.contents（）.find（'#threeplay div'）.append（$（“”{
键入：“text/javascript”，
async:true，
src://static.3playmedia.com/p/projects/11439/files/831301/plugins/10616.js”
}));
});
});

---

但它在运行时不会检测iframe，也不会向其附加div或脚本。有人知道如何让它工作吗

您的iframe内容可能尚未加载到document.ready上。您应该在iframe加载时附加回调。类似于$（iframe）.on（'load'，callback）

如果iframe src与您的域不同，那么您无法从代码中访问iframe内容。这是浏览器为外部加载的文档提供的安全性

查看问题的答案：

---

您提供的示例没有在

iframe

中附加

div

和

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"
                }));
        });
});

jQuery（文档）.ready（函数（$）{
//对于每个kaltura Iframe
$（'iframe.class'）。每个（函数（索引）{
//找到正文并在后面添加这些项目
$（this.contents（）.find（'body'）.append（''）；
//创建脚本元素并将其插入页面
$（this）.contents（）.find（'#inserted div'）.append（$（“”{
键入：“text/javascript”，
//src:src，
async:true，
src://www.example.com/javascript.js
}));
});
});

---

尝试此示例并使用

f12

（开发人员工具）进行验证

有没有建议使用下面的代码来执行此操作？这仍然不起作用。div没有出现在Iframe中。请尝试此JSFIDLE示例，并使用f12验证Iframe内容。只需使用完整的exampleiframe src更新原始问题-返回什么？