JavaScript Tutorial/HTML Tags/body

Материал из Web эксперт
Перейти к: навигация, поиск

body onload event

<html>
<head>
<title>body onload event</title>
<script type="text/javascript" language="javascript">
<!-- //
function Calculate(){
document.write("AAA");
}
// -->
</script>
</head>
<body onload="Calculate()">
</body>
</html>


Body onScroll event

<html>
    <head>
        <title>OnScroll Example</title>
    </head>
    <body onscroll="alert("Scrolling")">
         <P>Try scrolling this window.</p>
         <P>Try scrolling this window.</p>
         <P>Try scrolling this window.</p>
         <P>Try scrolling this window.</p>
         <P>Try scrolling this window.</p>
         <P>Try scrolling this window.</p>
         <P>Try scrolling this window.</p>
         <P>Try scrolling this window.</p>
         <P>Try scrolling this window.</p>
         <P>Try scrolling this window.</p>
         <P>Try scrolling this window.</p>
         <P>Try scrolling this window.</p>
         <P>Try scrolling this window.</p>
         <P>Try scrolling this window.</p>
         <P>Try scrolling this window.</p>
         <P>Try scrolling this window.</p>
         <P>Try scrolling this window.</p>
         <P>Try scrolling this window.</p>
         <P>Try scrolling this window.</p>
         <P>Try scrolling this window.</p>
         <P>Try scrolling this window.</p>
         <P>Try scrolling this window.</p>
         <P>Try scrolling this window.</p>
         <P>Try scrolling this window.</p>
    </body>
</html>


body tag onStop event handler (IE)

<html>
<head>
<title>A Simple Page</title>
<script language="JavaScript">
<!--
function stopped()
{
    alert("Hey, don"t go");
}
//  -->
</script>
</head>
<body onstop="stopped()">
</body>
</html>


Call your function in body onClick event

<html>
<head>
<title>A Simple Page</title>
<script language="JavaScript">
<!--
function yourMessage()
{
    alert("Your first function!");
}
//  -->
</script>
</head>
<body onClick="yourMessage()">
</body>
</html>


document.body.scrollTop

<html>
    <head>
        <title>OnScroll Example</title>
        <script type="text/javascript">
            window.onload = function () {
                var oWatermark = document.getElementById("divWatermark");
                oWatermark.style.top = document.body.scrollTop;
            }
        </script>
    </head>
<body>
<div id="divWatermark" style="position: absolute; top: 0px; right: 0px; color: #cccccc; width: 150px; height: 30px; background-color: navy">www.wbex.ru</div>
</body>
</html>


OnUnload Example

<html>
    <head>
        <title>OnUnload Example</title>
    </head>
    <body onunload="alert("Goodbye")">
        Navigate to another page or close the window.
    </body>
</html>


Report document.body.scrollLeft and document.body.scrollTop

<html>
    <head>
        <title>OnScroll Example</title>
        <script type="text/javascript">
            window.onscroll = function () {
                var oTextbox = document.getElementById("txt1");
                oTextbox.value += "\nscroll is at " + document.body.scrollLeft + " horizontally and " + document.body.scrollTop + " vertically.";
            }
        </script>
    </head>
    <body>
         <P><textarea rows="15" cols="50" id="txt1"></textarea>
         <P>Try scrolling this window.</p>
         <P>Try scrolling this window.</p>
         <P>Try scrolling this window.</p>
         <P>Try scrolling this window.</p>
         <P>Try scrolling this window.</p>
         <P>Try scrolling this window.</p>
         <P>Try scrolling this window.</p>
         <P>Try scrolling this window.</p>
         <P>Try scrolling this window.</p>
         <P>Try scrolling this window.</p>
         <P>Try scrolling this window.</p>
         <P>Try scrolling this window.</p>
         <P>Try scrolling this window.</p>
         <P>Try scrolling this window.</p>
         <P>Try scrolling this window.</p>
         <P>Try scrolling this window.</p>
         <P>Try scrolling this window.</p>
         <P>Try scrolling this window.</p>
         <P>Try scrolling this window.</p>
         <P>Try scrolling this window.</p>
         <P>Try scrolling this window.</p>
         <P>Try scrolling this window.</p>
         <P>Try scrolling this window.</p>
         <P>Try scrolling this window.</p>
    </body>
</html>


Use alert dialog in body onresize event

<html>
    <head>
        <title>OnResize Example</title>
    </head>
    <body onresize="alert("Resizing")">
    </body>
</html>


Use custom function as body onload event handler

<html>
    <head>
        <title>Onload Example</title>
        <script type="text/javascript">
            function handleLoad() {
                alert(window.onload);
            }
        </script>
        <body onload="handleLoad()">
        </body>
</html>


You cannot set onload function to document.body.onload

<html>
    <head>
        <title>Onload Example</title>
        <script type="text/javascript">
            document.body.onload = function () {
                alert("loaded");
            }
        </script>
    </head>
    <body>
    </body>
</html>