如何在不加载的情况下调用函数

How to call function without onload

本文关键字：情况下 调用 函数 加载      更新时间：2023-09-26

我试图找到一种从头部动态写入正文中的表的方法，并遇到了这个示例代码。问题是它使用"onload"调用函数。我需要从代码中的循环中调用函数来写入表。

<!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>

我试着命名这个函数，去掉onload并从头部的脚本中调用这个函数，但这不起作用。

您必须将script放在html中div之后才能使用function foobar()，然后编写foobar();

这是用于调用函数的，但是onload=function()也可以在<head>标签中工作。原因是如果它是一个函数，页面会按顺序渲染，并且如果它在头部，则<div>在页面到达时将不存在，但是onload表示页面加载完成后的。

这并没有那么难。但首先你必须隔离js和标记。

隔离可以让您更好地管理代码。试试这个：

HTML:

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

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);
}

在此处查找有效的解决方案：http://jsfiddle.net/tx5Xd/

我不确定我是否完全理解这个问题，但将函数定义为头，然后在html文件的末尾调用函数。

我处理这种情况的首选方法是a）仍然使用onload，因为这是浏览器通知您内容已完成加载的好方法；但是b）继续将代码分解为自己的函数，然后从onload处理程序中调用该函数。例如：

function myFunction(param1, param2) {
    // do your important stuff here
}
window.addEventListener('load', function(){
    myFunction('foo', 'bar');
}, false);

这样，在页面加载完成之前，函数仍然不会被调用，但如果您愿意，也可以稍后单独调用它。

相关文章：