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

Question

I have a page that has an iframe on it and am using jQuery to try to add an additional script into the iframe and an empty div at the end.

The Iframe code is:

<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>

So far the script i have is:

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

but it does not detect the iframes when run, nor does it append the div or the script to it. Anyone have an idea how to get this working?

Answer 1

Your iframe content might have not loaded on document.ready. You should attach the callback on iframe load. like this $(iframe).on('load',callback);

If the iframe src is of different domain from yours, then you cannot access the iframe contents from your code. Thats the security provided by browsers to externally loaded documents.

See the answer for question:
Replacing HTML within an iframe jquery

Answer 2

The sample provided by you doesn't append div and script within iframe , instead it appends the div in the current window only. The sample code (shown below) appends script tag within iframe and jquery is used to create script tag.

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

Try this jsfiddle example and use f12 (developer tools) to verify.