スクリプトタグをiframeで動的に置き換える方法

Question

iFrameタグの後にスクリプトタグを挿入しようとしています。ここでは、データダッシュ属性を持つスクリプトタグを見つけて、その要素を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

bbc.com上に存在しないスクリプトのURLに基​​づいてBBCのホームページを取得する作業例を以下に示します。

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>

は、トラブルシューティングのために、あなたの目標は、HTMLに手動で追加するときのiframeをロードすることをテストすることによって、例えば、フレーミングを可能にすることを確認してください。また、ウェブサーバーなしでローカルでテストする場合、つまりアドレスバーに表示されるURLが file:///で始まる場合は、プロトコルなしのiframe URL "//" + getHostName(target.attr("src"))が機能しません。