Я хочу запустить функцию при загрузке страницы, но не хочу использовать ее в теге <body>
.
У меня есть скрипт, который запускается, если я инициализирую его в <body>
, например, так:
function codeAddress() {
// code
}
<body onLoad="codeAddress()">
Но я хочу запустить его без <body onload="codeAddress()">
и я пробовал много вещей, например, это:
window.onload = codeAddress;
Но это не работает.
Как же мне запустить его при загрузке страницы?
window.onload = codeAddress;
должно работать - [здесь'есть демо](
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
function codeAddress() {
alert('ok');
}
window.onload = codeAddress;
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
function codeAddress() {
alert('ok');
}
</script>
</head>
<body onload="codeAddress();">
</body>
</html>
А не с помощью jQuery или окно.события onload, родной JavaScript принял несколько отличных функций с выходом на jQuery. Сейчас все современные браузеры имеют свои готовые функции DOM без использования библиотеки jQuery.
Я'd рекомендую это, если вы используете родной JavaScript.
document.addEventListener('DOMContentLoaded', function() {
alert("Ready!");
}, false);
Принимаю ответ Darin'a, но в стиле jQuery. (Я знаю, что пользователь просил javascript).
[running fiddle][1]
$(document).ready ( function(){
alert('ok');
});
Альтернативным решением. Я предпочитаю это за краткость и простоту кода.
(function () {
alert("I am here");
})();
Это анонимная функция, где имя не указано. Что здесь происходит то, что функция определена и выполняется вместе. Добавить в начало или конец тела, в зависимости от того, если он будет выполнен перед загрузкой страницы или только после того, как все элементы HTML, которые загружаются.
окна.функцию onload = () {
... и т. д. не многие ответят.
Это будет, вероятно, работать, но это будет также нарушать любые другие функции, уже пристегнув к этому событию. Или, если другая функция крючки в этом случае после вашей, она разобьет твое. Таким образом, вы можете потратить много часов, пытаясь выяснить, почему что-то, что работает это'т больше.
Более надежный ответ здесь
if(window.attachEvent) {
window.attachEvent('onload', yourFunctionName);
} else {
if(window.onload) {
var curronload = window.onload;
var newonload = function(evt) {
curronload(evt);
yourFunctionName(evt);
};
window.onload = newonload;
} else {
window.onload = yourFunctionName;
}
}
Некоторые код, который я использую, я забываю, где я нашел его, чтобы дать автору кредит.
function my_function() {
// whatever code I want to run after page load
}
if (window.attachEvent) {window.attachEvent('onload', my_function);}
else if (window.addEventListener) {window.addEventListener('load', my_function, false);}
else {document.addEventListener('load', my_function, false);}
Надеюсь, что это помогает :)
Посмотрите на скрипт domReady, который позволяет установить несколько функций для выполнения после загрузки DOM. По сути, это то, что делает Dom ready во многих популярных библиотеках JavaScript, но он легкий и может быть взят и добавлен в начало вашего внешнего файла сценария.
Пример использования
// add reference to domReady script or place
// contents of script before here
function codeAddress() {
}
domReady(codeAddress);
окна.события onload будет работать так:
в
function codeAddress() {
document.getElementById("test").innerHTML=Date();
}
window.onload = codeAddress;
<!DOCTYPE html>
<html>
<head>
<title>learning java script</title>
<script src="custom.js"></script>
</head>
<body>
<p id="test"></p>
<li>abcd</li>
</body>
</html>
в
Попробуйте readystatechange
document.addEventListener('readystatechange', () => {
if (document.readyState == 'complete') codeAddress();
});
где государства являются:
DOMContentLoaded
в
<script>
document.addEventListener("DOMContentLoaded", () => {
mydiv.innerHTML += 'DOMContentLoaded' + '</br>';
});
window.onload = () => {
mydiv.innerHTML += 'window.onload' + '</br>';
} ;
document.addEventListener('readystatechange', () => {
mydiv.innerHTML += 'ReadyState: '+document.readyState + '</br>';
if (document.readyState == 'complete') codeAddress();
});
function codeAddress() {
mydiv.style.color = 'red';
}
</script>
<div id='mydiv'></div>
в
Если вы хотите запустить функцию, когда организм нагрузок. Вместо того, чтобы дать атрибут onload в теге body, вы можете сделать такой.
в
// define the body
var body = document.getElementsByTagName("body")[0];
// or
// var body = document.querySelector("body");
// or
// var body = document.querySelectorAll("body")[0];
function codeAddress() {
// your function
alert("Hello World");
}
body.onload = function() {
codeAddress();
};
<!DOCTYPE html>
<html>
<head>
<title>learning java script</title>
</head>
<body>
<h1>Sample Heading</h1>
<p>Sample text</p>
</body>
</html>
в