原创地址:http://blog.csdn.net/van416521/article/details/6953556
1.问题描述:
当一个HTML页面中加载了两个window.οnlοad=function() {};函数时,页面只会执行第二个window.onload里面的内容
如下,结果显示2:
- <!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>
- <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
- <title>test</title>
- <script language="javascript">
- window.onload = function() {
- alert('1');
- };
- </script>
- </head>
- <body>
- <h1>表格</h1>
- <script type="text/javascript">
- window.onload = function() {
- alert('2');
- };
- </script>
- </body>
- </html>
2.解决方法如下,可以显示1,2:
- <!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>
- <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
- <title>test</title>
- <script language="javascript">
- window.onload = function() {
- alert('1');
- };
- </script>
- </head>
- <body>
- <h1>表格</h1>
- <script type="text/javascript">
- var saved;
- if (typeof window.onload == 'function') {
- saved = window.onload;
- }
- window.onload = function() {
- if (saved) saved();
- alert('2');
- };
- </script>
- </body>
- </html>
3.优化成函数:
- function addEvent(obj,evt,fn) {
- var saved;
- if (typeof obj["on"+evt] == "function") {
- saved = obj["on"+evt];
- }
- obj["on"+evt] = function () {
- if (saved) saved();
- fn();
- }
- }
如下,跟2一样:
- <!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>
- <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
- <title>test</title>
- <script language="javascript">
- function addEvent(obj,evt,fn) {
- var saved;
- if (typeof obj["on"+evt] == "function") {
- saved = obj["on"+evt];
- }
- obj["on"+evt] = function () {
- if (saved) saved();
- fn();
- }
- }
- addEvent(window,'load',firstAll);
- function firstAll() {
- alert('1');
- }
- </script>
- </head>
- <body>
- <h1>表格</h1>
- <script type="text/javascript">
- addEvent(window,'load',nextAll);
- function nextAll() {
- alert('2');
- }
- </script>
- </body>
- </html>