Htm5スキルコレクション

1.実際のプロジェクトでは、Page_1.htmlやPage_2.htmlなどのコンテンツに別のページのhtmlを導入する必要がある場合があります。Page_1.htmlホームページでPage_2.htmlを引用するにはどうすればよいですか。

[ここでの「紹介」とは、ハイパーリンクではなく、呼び出しまたは埋め込みを意味します。リンクは、このように<ahref = "XX.html">の形式を使用できます。HTML5ハイパーリンクについては、https：//blog.csdn.net/cnds123/article/details/113782944を参照してください]

iframeフローティングフレームを使用して、ウィンドウのサイズを自由に制御します。これは、実際にはウィンドウ内に別のウィンドウを作成するためのものです。

前提知識

iframeフローティングフレームを使用して、ウィンドウのサイズを自由に制御します。これは、実際にはウィンドウ内に別のウィンドウを作成するためのものです。例えば

<!DOCTYPE html>
<html>
<meta  charset=utf-8" />
<head>
      <title>iframe浮动框架例子</title>

</head>
<body>
       <iframe width="90%" height="300px"src="http://www.baidu.com"></iframe>
</body>
</html>

ファイルをiframeDemo.htmlとして保存し、フォルダー（ディレクトリ）に配置し（ここではD：\ HTML5スキルコレクションです。実際の状況に応じて決定できます）、ブラウザーでiframeDemo.htmlを開くと、表示効果は次のようになります。：

この問題の解決策を以下に示します。

page_1.htmlの内容は次のとおりです。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>page_1</title>
</head>
<body>
       这是page_1的内容，下面引用Page_2.html的内容
       <iframe align="center" width="100%" height="50" src="./Page_2.html"  frameborder="10px" border="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>
       这是page_1的内容
</body>
</html>

page_2.htmlの内容は次のとおりです。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>page_2</title>
</head>
<body>
   这是page_2，显示当前时间
   <div id="linkweb">  </div>
   <script>setInterval("linkweb.innerHTML=new Date().toLocaleString()+' 星期'+'日一二三四五六'.charAt(new Date().getDay());",1000);  </script>
</body>
</html>

page_1.htmlとpage_2.htmlは同じフォルダ（ディレクトリ）に配置され（ここではD：\ HTML5スキルコレクションです。実際の状況に応じて決定できます）、ブラウザでpage_1.htmlを開くと、表示効果は次のようになります。：

2. htmlのリンクを前のページに戻す方法は、次を使用します。

<ahref = "javascript：history.go（-1）;">前のページに戻る</a>

前の文は、前のページに戻ることを認識し、1ステップ戻り、nステップ戻ります（複数ステップ）：<ahref = "javascript：history.go（-n）;">前のnページに戻る</a>

たとえば、Page_A.htmlとPage_B.htmlがあります。Page_A.htmlホームページリンクがPage_B.htmlに入った後に戻るにはどうすればよいですか？

page_A.htmlの内容は次のとおりです。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>page_A</title>
</head>
<body>
       这是page_A的内容<br/>
        <a href="page_B.html">打开链接page_B</a> 
</body>
</html>

page_B.htmlの内容は次のとおりです。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>page_B</title>
</head>
<body>
       这是page_B<br/>
       <a href="javascript:history.go(-1);">返回上一页</a>
</body>
</html>

page_A.htmlとpage_A.htmlは同じフォルダ（ディレクトリ）に配置され（ここではD：\ HTML5スキルコレクションです。実際の状況に応じて決定できます）、ブラウザでpage_A.htmlを開くと、表示効果は次のようになります。：

3.特定のHTMLページファイルが開かれたらすぐに特定のjs関数をロードして実行する方法

方法1では、onloadイベントを使用できます。bodyタグの後に、onloadを使用して、ページが開いたときにmyfun（）関数をロードして実行します。フォーマット

<bodyοnlοad= "JS関数名（）">

A.htmlという名前のWebページファイルにmyfun（）という名前の関数が既に存在すると仮定して、A.html Webページの<body>を<bodyοnlοad= "myfun（）">に変更し、Aという名前のWebページを開きます。 myfun（）関数を実行するhtml

A.htmlWebページファイルのコードは次のとおりです。

<!DOCTYPE html>
<html>
<meta  charset=utf-8" />
<head>
      <title>一打开页面就执行一个JS函数</title>
</head>
<body onload="myFun()">
<script>
      function myFun(){
          alert("myFun()函数执行了");
      }
</script>
</body>
</html>

方法2、関数は<script> </ script>間で直接呼び出すこともでき、B.htmlWebページファイルのコードは次のとおりです。

<!DOCTYPE html>
<html>
<meta  charset=utf-8" />
<head>
      <title>一打开页面就执行一个JS函数法2</title>
</head>
<body>
<script>
      function myFun(){
          alert("myFun()函数执行了");
      }
      myFun(); //调用
</script>
</body>
</html>

次の図に示すように、ブラウザでA.htmlページを開くと、B.htmlページと同じ効果があります。

Htm5スキルコレクション

Htm5スキルコレクション

おすすめ