Question

点击“ test html”按钮后，“ Done 4”不显示，只有“ Done1,2,3”！

以下示例：

<!DOCTYPE html>

<textarea style="width:50%;" rows="15" id="TA_1">

<div style="color:red"> test </div>

<script>
window.onload = function(){alert('Done 4');}
alert('Done 1'); 
alert('Done 2'); 
alert('Done 3');
</script>

</textarea>

<br>
<button type="button" onclick='document.write(document.getElementById("TA_1").value)'>Test Html</button>
//Since "document.write()" is called after DOM load, all the document will be re-written (Intended behavior!)

Answer 1

好吧，似乎在重写DOM之后，“ document.write（）”不会调用“ document.close（）”，因此需要手动调用！

所以下面的代码：

onclick='document.write(document.getElementById("TA_1").value);'>Test Html</button>

已更改为：

onclick='document.write(document.getElementById("TA_1").value); document.close();'>Test Html</button>

下面的最终代码（现在，“ Done 1,2,3”之后显示“ Done 4”）：

<textarea style="width:50%;" rows="15" id="TA_1">

<!DOCTYPE html>

<div style="color:red"> test </div>

<script>
window.onload = function(){alert('Done 4');}
alert('Done 1'); 
alert('Done 2'); 
alert('Done 3');
</script>

</textarea>

<br>
<button type="button" onclick='document.write(document.getElementById("TA_1").value); document.close();'>Test Html</button>
<br> - Since "document.write()" is called after DOM load, all the document will be re-written (Intended behavior!)
<br> - It seems that after re-writing DOM, "document.write()" does not call "document.close()", so it need to be called manually!

关于多次调用“ window.onload”的问题，如下所示：

（“完成1、2”之后没有显示“结束”）

<div style="color:red;"> Original Html </div>

<textarea id="TA_1"> <!-- _________________________________________ -->

<!DOCTYPE html>

<div style="color:green;"> Text Area Html (DOM Re-Written - Original Html Replaced) </div>

<script>
window.onload = function(){alert('Done End');};
alert('Done 1');
alert('Done 2');
</script>

</textarea>

<script>   //________________________________________________________________

window.onload = function(){document.write(document.getElementById("TA_1").value); document.close();};
//Since "document.write()" is called after DOM load, all the document will be re-written
//It seems that after re-writing DOM, "document.write()" does not call "document.close()", so it need to be called manually! 

</script>

解决方案是改用“ setTimeout（）”：

（“完成1、2”之后显示“完成结束”）

<div style="color:red;"> Original Html </div>

<textarea id="TA_1"> <!-- _________________________________________ -->

<!DOCTYPE html>

<div style="color:green;"> Text Area Html (DOM Re-Written - Original Html Replaced) </div>

<script>
window.onload = function(){alert('Done End');};
alert('Done 1');
alert('Done 2');
</script>

</textarea>

<script>   //________________________________________________________________

setTimeout(function(){document.write(document.getElementById("TA_1").value); document.close();}, 1);
//Since "document.write()" is called 1 milliseconds after DOM load, all the document will be re-written
//It seems that after re-writing DOM, "document.write()" does not call "document.close()", so it need to be called manually! 

</script>

为什么单击按钮后“ window.onload”不起作用？

1 个答案: