object タグを介して html ファイルを追加しています。object タグを囲む div は非表示 (display:none) です。
私が抱えている問題は、html オブジェクトの body タグに onpageshow イベントを配置しましたが、ブラウザー間で機能が異なることです。
Firefox は、html がオブジェクト内にロードされるとすぐに機能を実行するようです
Webkit (Safari/Chrome) は、div を再表示した場合にのみ再生します (これが必要です)。
Opera / IE10 では全く機能しません。
画面に表示されている場合にのみ関数を実行させる別の方法はありますか?
これがデモです。私がやろうとしていることの。
メインウィンドウのコード。
<script type="text/javascript">
function runthis()
{
if ( document.getElementById("wrapper").style.display == "none" )
{
document.getElementById("wrapper").style.display = "block";
document.getElementById("hide").innerHTML = 'Div showing';
}
else
{
document.getElementById("wrapper").style.display = "none";
document.getElementById("hide").innerHTML = 'Div hidden';
}
}
function removeObject()
{
if( document.getElementById("wrapper").innerHTML == '' )
{
document.getElementById("wrapper").innerHTML = '<object id="test_object" name="name" data="frame.html" onshow="callme();"></object>';
document.getElementById("add").innerHTML = 'Object added';
}
else
{
document.getElementById("wrapper").innerHTML = '';
document.getElementById("add").innerHTML = 'Object removed';
}
}
</script>
<body>
<div id="wrapper" style="display:none"></div>
<div>
<button type="button" onclick="runthis();">Show/Hide</button>
<button type="button" onclick="removeObject();">Add/Remove</button>
<div id="status"><span>Status: </span><span id="hide">Div hidden</span> | <span id="add">Object removed</span></div>
</div>
</body>
含まれるオブジェクトのコード
<script type="text/javascript">
function callme()
{
alert("running");
}
</script>
</head>
<body onpageshow="callme();">
</body>
したがって、基本的にアラートは、div が表示されていて、オブジェクトが読み込まれたときにのみ実行する必要があります。