更改從iframe不工作的父元素？

Question

任何人都可以建議，當我點擊鏈接時，爲什麼這個代碼不工作。

該鏈接位於ifame中，我希望鏈接切換主頁面中的菜單。

<script> 
$(document).ready(function() { 
quickout = 0; 
$("#scrollsetting").click(function(){ 
    if (quickout==0){ 
    window.parent.document.getElementById('quickmenu').show(300); 
    quickout = 1; 
    } else { 
    window.parent.document.getElementById('quickmenu').hide(300); 
    menuout=0; 
    } 
}) 
}); 
</script> 

Answer 1

的jQuery選擇不選擇在其他窗口的元素自然地，你必須要麼訪問jQuery的另一個窗口中查詢到它的DOM或傳遞到其他窗口的文件的引用，以便jQuery的可以找到你」重新尋找。

第一種方式，查詢iframe的用了jQuery的iframe內窗口內的元素，和一個在父窗口與父窗口的jQuery的：

$(document).ready(function() { 
    $("#scrollsetting").click(function() { 
     window.parent.$('#quickmenu').toggle(300); 
    }); 
}); 

Fiddle

雖然，它並不總是需要兩次加載jQuery，所以假設你只是將它加載到父窗口中，然後可以使用父級的jQuery context selector將其設置爲當前的document，而當它仍然默認爲父窗口的文檔時mitted：

$("#scrollsetting").click(function() { 
    $('#quickmenu', window.parent.document).toggle(300); 
}); 

Fiddle：

var $ = window.parent.$; 
$(document).ready(function() { 
    $("#scrollsetting", document).click(function() { 
     $('#quickmenu').toggle(300); 
    }); 
}); 

Fiddle

同樣，如果由於某種原因，你必須的jQuery僅在孩子的窗口，引用父窗口的文檔時使用上下文選擇

ps。別介意我的inject包裝。它只是一種以易讀的方式編寫代碼的方式，然後將其文本以IIFE的形式注入iframe之前 - 我的字符串並置隱式地調用Function.toString()。

當然，如果你有其他的依賴/插件，絕對需要包含在框架頁面中的jQuery，你可以選擇最簡單的第一個解決方案，或者選擇更合適的解決方案。

ps2。如果任何讀者在您的網頁中嘗試使用此代碼時遇到問題，請記住iframe需遵守same origin police。也就是說，當其src的域，協議或端口與父文檔不匹配時，您不能訪問iframe，並且相反。