如何動態替換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負載。此外，請注意，如果您在沒有網絡服務器的情況下進行本地測試，無協議iframe網址"//" + getHostName(target.attr("src"))不起作用，即地址欄中顯示的網址以file:///開頭。