Question

我有这段代码：

document.getElementById('auth-button').addEventListener('click', authorize);

当我的页面加载时，我想在不点击按钮的情况下触发它。

这是我的观点

单击授权按钮时，这是输出

我想在页面加载时自动点击该按钮。

Answer 1

你可以使用Document ready in jQuery，试试这个..

$( document ).ready(function() {
    authorize();
});

或javaScript中的这个..

window.onload = authorize;

注意：加载事件在文档加载过程结束时触发。此时，文档中的所有对象都在DOM中，并且所有图像，脚本，链接和子帧都已完成加载。

Answer 2

您可以使用以下代码在页面加载时调用函数authorize()：

document.addEventListener("DOMContentLoaded", function(event) { 
    authorize();
});

Answer 3

使用以下其中一项：

<body onload="script();">

或

document.onload = function ...

或

window.onload = function ...

Answer 4

您可以将authorize注册为在页面完全加载时调用的处理程序：

$(document).ready(authorize);

这需要jQuery。没有jQuery就可以实现同样的目的：

window.addEventListener('load', authorize);

Answer 5

您可以将addEventListener用于DOMContentLoaded事件：

document.addEventListener('DOMContentLoaded', function() {
    authButton.click();
}, false);

完整示例：

https://jsfiddle.net/7q0gxehk/1/

Answer 6

使用authorize优于window.onload直接在页面加载时触发document.onload功能会更容易，请参阅window.onload vs document.onload

window.onload = authorize;

但是，如果您正在考虑以编程方式触发点击，因为它无法在不同的浏览器中正常工作，例如Safari根本不起作用

Answer 7

到目前为止提供的其他答案似乎都没有考虑到 - 注册的处理程序实际上可能需要知道它在DOM中的位置。

例如，我们可以使用多个按钮来调用相同的处理程序，并使用该处理程序操作周围的DOM。只需在页面加载时调用authorize即可。

我选择使用DIV代替BUTTON来证明.click()方法仍有效。

更好的方法是使用javascript实际点击按钮。

＃1不工作

function byId(id){return document.getElementById(id)}
function allByClass(clss){return document.getElementsByClassName(clss)}
// useful for HtmlCollection, NodeList, String types
function forEach(array, callback, scope){for (var i=0,n=array.length; i<n; i++)callback.call(scope, array[i], i, array);} // passes back stuff we need


window.addEventListener('load', onDocLoaded, false);

function onDocLoaded(evt)
{
	forEach(allByClass('mBtn'), addHandler);
	
	function addHandler(elem)
	{
		elem.addEventListener('click', authorize, false);
	}
	
	alert('hit a okay to call authorize');
	authorize();								// wont return from this call, since authorize relies on a valid 'this' value
}

function authorize(evt)
{
	this.classList.add('clicked');
	this.textContent = 'clicked';
}

.mBtn
{
	border: solid 1px #555;
	border-radius: 2px;
	display: inline-block;
}

.clicked
{
	color: #dddddd;
	pointer-events: none;
}

<div class='mBtn'>Try me</div><div id='btn2' class='mBtn'>Or me</div><div class='mBtn'>Or even, me</div>

＃2 - 工作

function byId(id){return document.getElementById(id)}
function allByClass(clss){return document.getElementsByClassName(clss)}
// useful for HtmlCollection, NodeList, String types
function forEach(array, callback, scope){for (var i=0,n=array.length; i<n; i++)callback.call(scope, array[i], i, array);} // passes back stuff we need


window.addEventListener('load', onDocLoaded, false);

function onDocLoaded(evt)
{
	forEach(allByClass('mBtn'), addHandler);
	
	function addHandler(elem)
	{
		elem.addEventListener('click', authorize, false);
	}
	
	alert('hit okay to click the 2nd button with javascript');
	byId('btn2').click();								// will return from this call, since authorize relies on a valid 'this' value, and the btn gives it one.
}

function authorize(evt)
{
	this.classList.add('clicked');
	this.textContent = 'clicked';
}

.mBtn
{
	border: solid 1px #555;
	border-radius: 2px;
	display: inline-block;
}

.clicked
{
	color: #dddddd;
	pointer-events: none;
}

<div class='mBtn'>Try me</div><div id='btn2' class='mBtn'>Or me</div><div class='mBtn'>Or even, me</div>

自动触发按钮javascript

7 个答案:

＃1不工作

＃2 - 工作