1.iframe 父子視窗之間傳遞值和方法調用
iframe之間可以通過javascript來實現傳遞值和方法,直接上代碼
parent.htm
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" ><head> <title>iframe之間傳值與方法調用</title> <script src="JavaScript/JQuery/jquery-1.4.2.js" type="text/javascript"></script> <style type="text/css"> body{ font-size:9pt; } </style> <script type="text/javascript"> function getSonValue() { var sontxtName = window.frames["sonframe"].document.getElementById("txtSonName"); var parentName = document.getElementById("txtName"); parentName.value = sontxtName.value; } function parentAlert() { alert("我來自父頁面!"); } function getSonAlert() { return window.frames["sonframe"].sonAlert(); } function getSonValueJquery() { $("#txtName").val($("#txtSonName", window.frames["sonframe"].document).val()); } </script></head><body><fieldset><legend>調用子頁面值</legend><input type="button" value="點我" onclick="getSonValue()" /><input type="button" value="點我(Jquery)" onclick="getSonValueJquery()" /><input type="text" id="txtName" name="txtName"/></fieldset><fieldset><legend>調用子頁面方法</legend><input type="button" value="點我" onclick="getSonAlert()" /></fieldset><fieldset><legend>子頁面</legend><iframe name="sonframe" id="sonframe" src="Son.htm" height="500px" width="500px" frameborder=0></iframe></fieldset></body></html>
son.htm
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" ><head> <title></title> <script src="JavaScript/JQuery/jquery-1.4.2.js" type="text/javascript"></script> <script type="text/javascript"> function getParentValue() { var parentName = window.parent.document.getElementById("txtName"); var sonName = document.getElementById("txtSonName"); sonName.value = parentName.value; } function getParentJqueryValue() { $("#txtSonName").val($("#txtName", window.parent.document).val()); } function sonAlert() { alert("我來自子頁面!"); } function getParentAlert() { return window.parent.parentAlert(); } </script></head><body><fieldset><legend>調用父頁面值</legend><input type="button" value="點我" onclick="getParentValue()" /><input type="button" value="點我(Jquery)" onclick="getParentJqueryValue()" /><input type="text" id="txtSonName" name="txtSonName"/></fieldset><fieldset><legend>調用父頁面方法</legend><input type="button" value="點我" onclick="getParentAlert()" /></fieldset></body></html>