在页面加载时运行javascript

我正在使用一些代码来显示通知消息。下面的代码显示按钮单击时的消息。有没有什么方法可以在页面加载时显示消息，我打算使用“type”作为变量来选择消息。在页面加载时运行javascript

任何帮助，这个可以理解。

http://www.red-team-design.com/cool-notification-messages-with-css3-jquery#comment-168574

<head> 
<title>Cool notification messages with CSS3 & Jquery demo - Redteamdesign</title> 
<script src="../js/jquery-latest.min.js"></script> 
<link rel="stylesheet" type="text/css" media="screen" href="../css/bar.css"> 
<script> 
var myMessages = ['info','warning','error','success']; // define the messages types  
function hideAllMessages() 
{ 
    var messagesHeights = new Array(); // this array will store height for   each 
    for (i=0; i<myMessages.length; i++) 
    { 
       messagesHeights[i] = $('.' + myMessages[i]).outerHeight(); 
       $('.' + myMessages[i]).css('top', -messagesHeights[i]); //move element outside viewport  
    } 
} 
function showMessage(type) 
{ 

$('.'+ type +'-trigger').click(function(){ 
     hideAllMessages();     
     $('.'+type).animate({top:"0"}, 500); 
}); 
} 
$(document).ready(function(){ 
    // Initially, hide them all 
    hideAllMessages(); 
    // Show message 
    for(var i=0;i<myMessages.length;i++) 
    { 
     showMessage(myMessages[i]); 
    } 
    // When message is clicked, hide it 
    $('.message').click(function(){    
       $(this).animate({top: -$(this).outerHeight()}, 500); 
     }); 
     setTimeout(function(){hideAllMessages()},4000);   
});  
</script> 
</head> 
<body> 
<div class="info message"> 
    <h3>FYI, something just happened!</h3> 
    <p>This is just an info notification message.</p> 
</div> 
<div class="error message"> 
    <h3>Oh No!, an error ocurred</h3> 
    <p>This is just an error notification message.</p> 
</div> 
<div class="warning message"> 
    <h3>Wait, I must warn you!</h3> 
    <p>This is just a warning notification message.</p> 
</div> 
<div class="success message"> 
    <h3>Congrats, you did it!</h3> 
    <p>This is just a success notification message.</p> 
</div> 
<ul id="trigger-list"> 
    <li><a href="#" class="trigger info-trigger">Info</a></li> 
    <li><a href="#" class="trigger error-trigger">Error</a></li> 
    <li><a href="#" class="trigger warning-trigger">Warning</a></li> 
    <li><a href="#" class="trigger success-trigger">Success</a></li> 
</ul> 


</body>

来源

2013-03-04 Santosh Pillai

您不能有多个body元素。 – jantimon 2013-03-04 16:10:05

除去第二身体:) – 2013-03-04 16:12:58

从码我能理解你必须证明消息的信息，错误日志或warn.So在加载页面时，会是怎样，你打算显示的消息的默认类型。 – Aravind 2013-03-04 16:17:43

为了实现您的具体要求（显示的消息立即无需等待按下按钮），你可以在准备功能（只setTimeout(function(){hideAllMessages()},4000);后）结束

var type="warning"; 
$('.'+type).animate({top:"0"}, 500);

可以更换“警告”和“信息”添加此，“错误”或“成功”（或其他您希望添加的内容）。

来源

2013-03-04 17:36:43 Clafou

完美！卓越工程 – 2013-03-04 18:05:24

是，使用：：谢谢

的完整代码可以在这里找到

window.onload = function(){ 
SomeJavaScriptCode 
};

和地点，在该文件的<head>内<script>标签。

来源

2013-03-04 16:10:37 Husman

您能否让我确切地知道这会去哪里？ – 2013-03-04 16:14:01

奇数，看起来像我的一些标签被从帖子中删除。 – Husman 2013-03-04 16:15:07

这是为什么downvoted？ 'window.onload'比''更好，因为你要从HTML页面分离脚本。 – user2019515 2013-03-04 16:18:11

您不能有多个body标签。摆脱页面底部的首页标签。

你可以调用一个函数时，身体的负荷是这样的：

<body onload="someFunction();">

或者只是从你的$(document).ready()

someFunction();

内调用该函数也可以使用trigger以模拟click（或无论）在一个元素上：

$('.message').trigger('click');

来源

2013-03-04 16:15:08

我修改了开始体标签。这不起作用:( – 2013-03-04 17:16:02

问题是showMessage()函数实际上并没有显示消息，而只是为具有相应类的元素（如.info-trigger）创建了一个事件处理函数。我修改了部分代码，现在就像一个魅力。 :)

工作小提琴：http://jsfiddle.net/MC7Fu/

其他注意事项：请不要使用内联事件处理程序像<body onload="someFunc()">。使用推荐的一个Husman。

window.onload = function(){ 
SomeJavaScriptCode 
};

来源

2013-03-04 17:38:44 sudee

在页面加载时运行javascript

回答

相关问题