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

但是它在运行时没有检测到iframe，也没有将div或脚本附加到它上面。任何人都知道如何让这个工作？

Answer 1

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

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

查看问题的答案：
Replacing HTML within an iframe jquery

Answer 2

您提供的示例不会在div中附加script和iframe，而只会在当前窗口中附加div。示例代码（如下所示）在script中附加iframe标记，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（开发人员工具）进行验证。

将div和脚本插入页面上的iframe

2 个答案: