iframe的url可以前端任何位址，這樣就可能出現漏洞，如果釣魚網站通過js把src改成了危險位址，如果沒有監控，就會有很大隐患。是以監控iframe的url變化就是必須要解決的問題了。
第一印象的解決方案是通過setInterval輪詢監控，貌似不太理想了，而且有延遲。
千般搜尋，終于找到了好的方法，可以通過H5新增的MutationObserver來解決，配合DOMAttrModified和onpropertychange來解決相容性問題。
廢話少說，直接上代碼。
index.html代碼
Document
var elemIframList = document.getElementsByTagName('iframe');
for(var i=0;i
initIframeChange(elemIframList[i]);
}
function initIframeChange(elemIfram) {
if (window.MutationObserver || window.webkitMutationObserver) {
// chrome
var callback = function(mutations) {
mutations.forEach(function(mutation) {
iframeSrcChanged(mutation.oldValue,mutation.target.src,mutation.target);
});
};
if (window.MutationObserver) {
var observer = new MutationObserver(callback);
} else {
var observer = new webkitMutationObserver(callback);
}
observer.observe(elemIfram, {
attributes: true,
attributeOldValue: true
});
} else if (elemIfram.addEventListener) {
// Firefox, Opera and Safari
elemIfram.addEventListener("DOMAttrModified", function(event){iframeSrcChanged(event.prevValue,event.newValue,event.target);}, false);
} else if (elemIfram.attachEvent) {
// Internet Explorer
elemIfram.attachEvent("onpropertychange", function(event){iframeSrcChanged(event.prevValue,event.newValue,event.target);});
}
}
function iframeSrcChanged(oldValue,newValue,iframeObj) {
console.log('舊位址：'+oldValue);
console.log('新位址：'+newValue);
if(newValue.indexOf('aaaa')>-1){
console.log('有危險，請馬上離開……')
iframeObj.src=oldValue;//釣魚位址，恢複原url
}else{
console.log('安全位址，允許跳轉……');
}
}
// 模拟方法
function simuChange() {
var div = document.getElementById("iframeId");
div.setAttribute("src", "aaaa.html");
}
aaaa.html代碼
Document
aaaaaaaa.html
console.log('aaaa頁面的js執行成功')
執行結果：
危險情況：
安全情況：
我們發現，如果跳轉到危險頁面，可以直接恢複舊頁面，或者跳轉指定安全頁面，危險頁面的js并不會執行。
這貌似就是我們想要的結果。
以上這篇js 監控iframe URL的變化執行個體代碼就是小編分享給大家的全部内容了，希望能給大家一個參考，也希望大家多多支援腳本之家。