Как заменить тег скрипта на iframe динамически

Question

Я пытаюсь вставить тег скрипта после тега iFrame. Здесь я хочу найти тег скрипта с атрибутом dash данных и заменить этот элемент iframe после этого, добавив тег скрипта.

Вот мой код, но не работает.

(function ($) { 
var target = $("script[id=token]"); 
var iframe = $('<iframe>', { 
    src: "//" + getHostName(target.attr("src")) , 
    name: "MyFrame", 
    class: 'Myforms ' + target.attr("data-unique"), 
    frameborder: "0", 
    scrolling: "no"   
}).insertAfter($('<span>')); 

target.replaceWith(iframe); 

function getHostName(url) { 
    var l = document.createElement("a"); 
    l.href = url; 
    return l.host; 
} 

})(jQuery); 

Answer 1

Здесь Вы можете найти рабочий пример, выборка домашнюю ВВС на основе URL из несуществующих сценария на bbc.com.

Ваш insertAfter($('<span>')) не нужен, но он также не должен вызывать ошибок.

function getHostName(url) { 
 
    var l = document.createElement("a"); 
 
    l.href = url; 
 
    return l.host; 
 
} 
 

 
(function ($) { 
 
    var target = $("script[id=token]"); 
 
    var iframe = $('<iframe>', { 
 
    src: "//" + getHostName(target.attr("src")), 
 
    name: "MyFrame", 
 
    class: 'Myforms ' + target.attr("data-unique"), 
 
    frameborder: "0", 
 
    scrolling: "no"   
 
    }); 
 

 
    target.replaceWith(iframe); 
 
})(jQuery);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script id="token" src="http://www.bbc.com/nonexistingscript.js" data-unique="gnjrls"></script>

Для устранения неполадок, убедитесь, что ваша цель позволяет кадрирование, например, проверяя, что в Iframe нагрузки при добавлении вручную в HTML. Также обратите внимание на то, что URL-адрес iframe без протоколов "//" + getHostName(target.attr("src")) не работает, если вы тестируете локально без веб-сервера, т. Е. URL-адрес, отображаемый в адресной строке, начинается с file:///.