如何在HTML中执行javascript函数?

时间:2019-01-24 11:22:44

标签: javascript html

我有一个JavaScript代码,用于设置websocket连接并具有多种功能。 该websocket正常工作。 但是我想从HTML代码内的脚本运行javascript函数。这不起作用。如果我通过onclick事件运行该函数,那么它将正常工作(请参见按钮)。

我已经尝试了body onload,但是它不起作用。

我的目标是:如果加载了网页,请执行OnloadFunction函数。然后,它应该使用websocket发送一个字符串。

<!DOCTYPE html><html>
<head>
<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">
<link rel=\"icon\" href=\"data:,\">
<title>Testpage</title>
<meta charset="UTF-8"> 
<style>html { font-family: Helvetica; display: inline-block; margin: 0px auto; text-align: center; background-color:#5593F1}
.button { background-color: #195B6A; border: none; color: white; padding: 10px 40px;
text-decoration: none; font-size: 30px; margin: 2px; cursor: pointer;}
.button2 {background-color: #77878A;}
</style>
<script>
var connection;
connection = new WebSocket('ws://' + window.location.hostname + ':81/'); 
connection.onopen = function () {  connection.send('Connect ' + new Date()); }; 
connection.onerror = function (error) {    console.log('WebSocket Error ', error);};
connection.onmessage = function (e) {  console.log('Server: ', e.data);};

function OnloadFunction() {
  connection.send('* Test22');  
  alert("Hello! ");     
}
</script>

</head>
<body onload="javascript:OnloadFunction();"> 
<h1>Testpage</h1>
<p>Suche....</p>
<p><a href="/read.html"><button class="button" onclick="OnloadFunction()">read</button></a></p>
</body>
</html>

这是我的简单测试,但也无法正常工作

<body>
<h1>Test</h1>
<p>Suche...</p>
<p><a href="/read.html"><button class="button"   onclick="OnloadFunction()">Lesen</button></a></p>
<script>
var connection = new WebSocket('ws://' + window.location.hostname + ':81/'); 
connection.onopen = function () {  connection.send('Connect ' + new Date()); }; 
connection.onerror = function (error) {    console.log('WebSocket Error ', error);};
connection.onmessage = function (e) {  console.log('Server: ', e.data);};
connection.send('* Test22');
</script>  
</body>

怎么了?如果加载了网络端,如何在html代码中执行功能OnloadFunction()?

EDIT1: 感谢您的所有建议。我尝试了很多不同的方法,但是没有用。

现在我已经接近解决方案,但是我不了解新的错误。 由于window.onload = start;函数start()被执行; 但是连接后的代码。onmessage= function(evt){console.log(evt);}; 仅在alert(“ TEST ___”);时执行。在代码中。如果我删除此行,那么之后的代码将不会执行。为什么没有警报(“ TEST___”)无法执行代码; ??按下按钮后,所有设置都可以正常运行,而不会发出警报。

这是我的代码websock2.js(更改仅用于测试):

var connection;
function OnloadFunction() {
  connection.send('* Test22'+' x'); 
  alert("LOADED! ");      
}

function start() {
  alert("Start! "); 
  connection = new WebSocket('ws://' + window.location.hostname + ':81/'); 
  <!-- connection = new WebSocket('ws://192.168.1.5:81/',['arduino']); -->
  connection.onopen = function () {  connection.send('Connect ' + new Date()); }; 
  connection.onerror = function (error) {    console.log('WebSocket Error ', error);};
  connection.onmessage = function(evt) { console.log(evt);};
  alert("TEST___");       
  connection.send('* Test22'+' x'); 
  console.log('effekt: '); 
  alert("LOADED! ");      
}

window.onload=start;

这是我的html代码:

<!DOCTYPE html><html>
<head>
  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">
  <link rel=\"icon\" href=\"data:,\">
  <title>Testpage</title>
  <meta charset="UTF-8"> 
  <script src="websock2.js" async></script> 
  <style>html { font-family: Helvetica; display: inline-block; margin: 0px auto; text-align: center; background-color:#5593F1}
    .button { background-color: #195B6A; border: none; color: white; padding: 10px 40px;
    text-decoration: none; font-size: 30px; margin: 2px; cursor: pointer;}
    .button2 {background-color: #77878A;}
  </style>


</head>
<body>
  <h1>Testpage</h1>
  <p>read....</p>
  <p><a href="/read.html"><button class="button" onclick="OnloadFunction()">Lesen</button></a></p>
</html>

0 个答案:

没有答案