简体   繁体   English

HTML中的Javascript onload

[英]Javascript onload in HTML

I want to ask a question about the Javascript's onload . 我想问一个关于Javascript的onload

I'm writing a JSP page with the code <%@ include file ="body.jsp" . 我正在编写一个代码为<%@ include file ="body.jsp"的JSP页面。 The included body.jsp contains: 包含的body.jsp包含:

<table onload="function()">

This should load the javascript function, but it doesn't appear to have any effect on the page. 应该加载javascript函数,但它似乎对页面没有任何影响。 Is onload only usable on the body tag? onload只能在body标签上使用吗?

Onload can only be used for <body> , <img> , <script> , <iframe> tags, because it tells you when an external resource (image, script, frame) or the whole page (body) has been loaded Onload只能用于<body><img><script><iframe>标记,因为它会告诉您何时加载了外部资源(图像,脚本,框架)或整个页面(正文)

Since HTML5 these can also fire a load event: <link> , <style> , <input type=image> , <object> HTML5开始,这些也可以触发加载事件: <link><style><input type=image><object>
Support for these can still be a hit or miss though ( eg older Android browsers ) 虽然支持这些仍然是一个打击或错过( 例如较旧的Android浏览器

Why not just include it via a <script tag> ? 为什么不通过<script tag>包含它?

Inside your .jsp file 在.jsp文件中

<script>
    window.onload = function() {
        alert("Hello!");
    }
    // or to execute some function
    window.onload = myFunction; //notice no parenthesis
</script>

As the other guys already stated the onLoad event will not fire on a table. 正如其他人已经声明的那样,onLoad事件不会在桌子上发射。 What you can do ist attaching the onLoad-handler to the body element (which will then fire, when the page is loaded) and manipulate the table by for example assigning an id to the table. 您可以做的是将onLoad-handler附加到body元素(然后在加载页面时将触发)并通过例如为表分配id来操作表。

<body onload="function() { var table = document.getElementById("table-id"); ... }">
    <table id="table-id"></table>
</body>

Are you using some javascript framework? 你在使用一些javascript框架吗?

"onLoad" may be used on body- and frameset-tags. “onLoad”可用于body-frameset-frameset-tag。 To see some action you may use: 要查看您可能使用的某些操作:

<body onload="function(){alert('This is an action!')}">

The easiest way i find is to use an external javascript file and jquery. 我找到的最简单的方法是使用外部javascript文件和jquery。

// Variables and functions you want to declare 
var socket = io.connect();
// .....

// Function you want to run on load
$(function() {
    $('#submit').click(function() {addUser();});
    // ... any other functions you want to run on load
});

This is a code snippet from something that i was working on. 这是我正在处理的代码片段。 The variable is declared before the code runs (It creates a web socket). 变量在代码运行之前声明(它创建一个Web套接字)。 Then there is the jquery document selector ( $ ) which runs on load and calls the init function to modify my html. 然后是jquery文档选择器( $ ),它在加载时运行并调用init函数来修改我的html。 I use it to call an anonymous function which runs right away. 我用它来调用一个立即运行的匿名函数。

You can throw a <script> tag right after your table with code. 您可以使用代码在表后面抛出<script>标记。 Once it gets to the script tag it would mean that the DOM for the table element above it has been loaded and can now be accessed in your script below it. 一旦它到达脚本标记,就意味着它上面的表元素的DOM已经加载,现在可以在它下面的脚本中访问。

Note : The following below isn't applicable to the question but rather the other answers being given. 注意 :以下内容不适用于该问题,而是给出了其他答案。

I recommend using the addEventListener function in javascript for adding the event. 我建议在javascript中使用addEventListener函数来添加事件。 This makes sure that you are not overwriting or going to be overwritten by anyone else wanting to listen to the event. 这可以确保您不会覆盖或被其他想要收听该事件的人覆盖。

Example

var iframe = document.getElementsByTagName('iframe')[0];
iframe.addEventListener('load', function(event){ console.log("iframe Loaded", event); })

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM