简体   繁体   English

如何在没有onload的情况下调用函数

[英]How to call function without onload

I was trying to figure out a way to dynamically write to a table in the body from the head and came across this sample code. 我试图找出一种从头开始动态写入体内表格并遇到此示例代码的方法。 The problem is that it calls the function using 'onload'. 问题在于它使用“ onload”调用该函数。 I need to call the function from a loop in my code to write to the table. 我需要从代码循环中调用该函数以写入表。

<!DOCTYPE HTML>
<html>
<head>
<title>Untitled Document</title>

<style type="text/css">
.mytable {
border:1px solid #000000;
border-collapse:collapse;
width:200px;
}
.mytable td{
background:#cccccc;
border:1px solid #000000;
}
</style>

<script type="text/javascript">
onload=function(){
var nrCols=2;
var maxRows=4;
var nrRows=maxRows+1;
while(nrRows>maxRows){
nrRows=Number(prompt('How many rows? Maximum '+maxRows+' allowed.',''));
}
var root=document.getElementById('mydiv');
var tab=document.createElement('table');
tab.className="mytable";
var tbo=document.createElement('tbody');
var row, cell;
for(var i=0;i<nrRows;i++){
    row=document.createElement('tr');
    for(var j=0;j<nrCols;j++){
        cell=document.createElement('td');
        cell.appendChild(document.createTextNode(i+' '+j))
        row.appendChild(cell);
    }
    tbo.appendChild(row);
}
tab.appendChild(tbo);
root.appendChild(tab);
}
</script>
</head>
<body>
<div id="mydiv"></div>
</body>
</html>

I tried to name the function and get rid of the onload and call the function from the script in the head but that doesn't work. 我试图命名该函数并摆脱onload并从头中的脚本调用该函数,但这不起作用。

you have to put the script after the div in the html to use function foobar() and afterward write foobar(); 您必须将script放在html中的div 之后才能使用function foobar() ,然后再编写foobar();

this is for calling a function, however onload=function() can also works in the <head> tag. 这用于调用函数,但是onload=function()也可以在<head>标记中使用。 the reason is if its a function the page renders in order and the <div> will not exist at the point the page reaches it if its in the head, however onload means after the page has finished loading. 的原因是,如果它的一个功能的页面呈现在顺序和<div>在页面到达它,如果它的头部,但是所述点将不存在onload装置的页面已经完成加载。

It's not that difficult. 没那么难。 But first you must segregate the js and mark up. 但是首先,您必须隔离js并进行标记。

Segregation allows you better code management . 隔离使您可以更好地进行代码管理。 Try this : 尝试这个 :

HTML: HTML:

<div id="mydiv"></div>
<button id="btn">Click</button>

JS: JS:

writeToTable();
function writeToTable(){
var nrCols=2;
var maxRows=4;
var nrRows=maxRows+1;
while(nrRows>maxRows){
nrRows=Number(prompt('How many rows? Maximum '+maxRows+' allowed.',''));
}
var root=document.getElementById('mydiv');
var tab=document.createElement('table');
tab.className="mytable";
var tbo=document.createElement('tbody');
var row, cell;
for(var i=0;i<nrRows;i++){
    row=document.createElement('tr');
    for(var j=0;j<nrCols;j++){
        cell=document.createElement('td');
        cell.appendChild(document.createTextNode(i+' '+j))
        row.appendChild(cell);
    }
    tbo.appendChild(row);
}
tab.appendChild(tbo);
root.appendChild(tab);
}

Find the working solution here : http://jsfiddle.net/tx5Xd/ 在此处找到有效的解决方案: http : //jsfiddle.net/tx5Xd/

不确定我是否完全理解问题,但是在标头中定义函数,然后在html文件末尾调用函数。

My preferred way of handling situations like this is to a) still use onload , because it's a great way for the browser to inform you that the content has finished loading; 我处理这种情况的首选方式是:a)仍然使用onload ,因为这是浏览器通知您内容已完成加载的好方法; but b) go ahead and factor your code into its own function, but then just call that function from your onload handler. 但是b)继续并将您的代码分解为自己的函数,但是只需从onload处理程序中调用该函数即可 For example: 例如:

function myFunction(param1, param2) {
    // do your important stuff here
}

window.addEventListener('load', function(){
    myFunction('foo', 'bar');
}, false);

That way, your function still won't get called until after the page finishes loading, but you can also call it separately later if you like. 这样,您的函数直到页面完成加载后仍不会被调用,但是您也可以在以后根据需要单独调用它。

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

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