Javascript
 Computer >> コンピューター >  >> プログラミング >> Javascript

JavaScript：ページを更新

JavaScriptを使用してWebページを更新する必要がある場合があります。必要に応じて、ロケーションオブジェクトを使用してreload()を使用します 方法。 

<!DOCTYPE html>
<html>
 
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>repl.it</title>
  <link href="style.css" rel="stylesheet" type="text/css" />
</head>
 
<body onload="handleLoad()">
  <button id="btn">Click Me!</button>
   <script>
     let arrayKittens = [ "https://placekitten.com/200/300", "https://placekitten.com/210/310", "https://placekitten.com/300/300", "https://placekitten.com/300/200", "https://placekitten.com/310/210", "https://placekitten.com/400/300"];
 
     let button = document.querySelector("#btn");
     button.style.display = "block";
     button.style.margin = '20px 0px'
 
     const handleClick = (e) => {
       console.log("click")
       location.reload(true);
     }
 
     button.addEventListener("click", handleClick);
 
 
     let body = document.querySelector("body");
     let image = document.createElement("img");
 
     const handleLoad = (e) => {
       console.log("loaded")
       let random = Math.floor(Math.random() * arrayKittens.length);
       let newImg = arrayKittens[random];
       image.setAttribute("src", newImg);
       image.setAttribute("width", "300");
       image.setAttribute("height", "300");
       image.setAttribute("alt", "  arrayKittens[" + random + "]");
       image.style.objectFit = "cover";
 
 
       body.appendChild(image);
     };
   </script>
 </body>
</html>

このドキュメントには2つのイベントリスナーがあります。 1つ目は、ページを読み込んで<img />を追加するときに発生します DOMに。 2番目にはreload()が含まれています 関数。ユーザーが「ClickMe！」をクリックすると、handleClick()をトリガーしてページがリロードされます 関数。このページでは、JavaScriptを使用して、ほぼすべてのロジックを処理しています。

この特定の例では、猫の写真の配列からランダムな猫の写真が、ページがリロードされるたびに表示されます。

渡されたtrueまたはfalseの値は、ページがサーバーからリロードされたか、ブラウザのキャッシュからリロードされたかを示します。デフォルト値はfalseで、キャッシュからページをリロードするため、サーバーからページをリロードする場合を除いて、値を渡す必要はありません。

これですべてです！


  1. JavaScriptでアップロードする前に画像をプレビューする

    セキュリティ上の理由から、ブラウザは入力を介して選択された画像ファイルのパスにアクセスすることを許可していません。つまり、ブラウザのJavaScriptはファイルシステムにアクセスできません。したがって、私たちのタスクは、入力を介して選択された画像ファイルをプレビューしてから、サーバーやその他の場所に送信することです。 方法1：URLクラスを使用する： URLクラスのcreateObjectURL（）関数を使用して、入力によって選択された画像のURLを作成し、そのURLをimgタグのsrc属性に提供できます。 例 このためのコードは-になります <img id="previ

  2. HTMLページに画像を挿入する方法は？

    画像はHTMLページの任意のセクションに簡単に挿入できます。 HTMLページに画像を挿入するには、タグを使用します。これは空のタグであり、終了タグは必要ないため、属性のみが含まれています。 …タグ内でタグを使用する必要があることに注意してください。 src属性は、画像ソース、つまり画像のURLを追加するために使用されます。 alt属性は、代替テキストを追加するためのものであり、幅は幅を追加するためのものであり、高さは画像の高さを追加するためのものです。 例 次のコードを試して、HTMLページに画像を挿入できます- <!DOCTYPE html> <html> &n