イベント ハンドラーは、HTML ソース内でインラインで割り当てられます('onclick="..."')
。その HTML ソースは iframe で受信され、表示されているページに移動されます(document.getElementById("...").appendChild(iframenodesnewhtmlsource)).
イベント ハンドラーは、form submit (document.getElementById("form1").submit())
. フォームは、上記の新しい HTML ソースが受信された iframe に送信されます。"action="
フォームのページは、parent.func()
JavaScript で a を実行する HTML ページを送信することによって応答します。これらparent.func()
は、イベント ハンドラーと同じスコープ内の表示されたページ内の関数であり、実行されます。暗黙の JavaScript は、フォームの送信後も実行されます。
ただし、イベント ハンドラーを呼び出す必要があるイベント ハンドラー要素に対して再度アクションを実行しても、イベント ハンドラーは呼び出されません。明示的な JavaScript イベント ハンドラーは、フォームの送信後に呼び出されません。
IE での名前の競合により、同様のコードで同じ問題が発生しました。IE は、「フォーム」などのフォーム名や、関数などと同じ名前を持つ ID を好みません。元の問題に対する解決策がない場合は、IE の HTML 要素の命名と JavaScript の命名について、知っていればそれについて書いてください。
HTML5、Internet Explorer 8 標準モード。
以下のコード。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title></title>
<style type="text/css">
</style>
<script type="text/javascript">
function callback(data,type)
{
if(type == 0)
{
if(document.getElementById("tablediv").firstChild != null)
{
document.getElementById("tablediv").removeChild(document.getElementById("tablediv").firstChild);
}
document.getElementById("tablediv").appendChild(data.firstChild);
}
}
function load(tablesrc)
{
document.getElementById("changedfield").value = "table";
document.getElementById("showntable").value = tablesrc + "";
document.getElementById("form1").submit();
}
function savevalue(src,node)
{
document.getElementById("changedfield").value = src.id;
document.getElementById("changedvalue").value = src.value;
document.getElementById("form1").submit();
}
function init()
{
document.getElementById("form1").setAttribute("action","/cgi-bin"+window.location.pathname.substring(0,window.location.pathname.lastIndexOf("/"))+"/../../gettable.cgi");
load(1);
}
</script>
</head>
<body onload="javascript:init()">
<div id="tables">
<form id="form0" name="form0">
<div id="tableselect">
<input type="button" value="" onclick="javascript:load(1)" />
<input type="button" value="" onclick="javascript:load(2)" />
<input type="button" value="" onclick="javascript:load(3)" />
<input type="button" value="" onclick="javascript:load(4)" />
<input type="button" value="" onclick="javascript:load(5)" />
<input type="button" value="" onclick="javascript:load(6)" />
</div>
<div id="tablediv"></div>
</form>
<form id="form1" name="form1" target="iframe1" method="post" action="">
<input type="hidden" id="showntable" name="showntable" value="" />
<input type="hidden" id="changedfield" name="changedfield" value="" />
<input type="hidden" id="changedvalue" name="changedvalue" value="" />
</form>
<iframe id="iframe1" name="iframe1"></iframe>
</div>
</body>
</html>