スタートページ＞ Javascript＞

リンク：location.hrefとwindow.open

単純リンク　location.href

scriptなしの場合

• 機能：単に別ファイル linked.html を呼び出します。
  <a href="linked.html">実行</a> と同じです。
• 記述：

  <button onClick="location.href='linked.html'">例１</button>

• テスト：例１
• 説明：location.href は標準装備なので、script部での記述は不要です。

scriptを使う場合

• 記述
  

  function 例１(リンク先ＵＲＬ) {
      location.href = リンク先ＵＲＬ;
  }
  -----
  <button onClick="例１('linked.html')">例２</button>
  

• テスト：例１

リンク先を別ページとして開く window.open

• 機能：<a herf="linked.html" target="_blank"> の機能です。location.href ではなく、window.open を使います。
• 記述：

  function 例２(リンク先ＵＲＬ, 表示ウインドウ) {
      window.open(リンク先ＵＲＬ, 表示ウインドウ);
  }
  -----
  <button onClick="例３('linked.html', '_blank')"> 例２(scriptあり)</span>
  =====
  <button onClick="window.open('linked.html', '_blank')">例２(scriptなし)</span>
  

• テスト： 例２(scriptあり) 例２(scriptなし)

リンク先をポップアップのように開く window.openのパラメタ

• 機能：例２では元のページが見えなくなります。リンク先のページの画面を小さくすれば、両方のページが見える状態になります。
  このように、ページの体裁を変更できます。
• 記述：

  function 例３(リンク先ＵＲＬ, 表示ウインドウ, パラメータ) {
      window.open(リンク先ＵＲＬ, 表示ウインドウ, パラメータ);
  }
  -----
  <button onClick="例３('linked.html', '_blank', 'width=300,height=200,scrollbars=yes')">例３(scriptあり)>/butto<>
  =====
  <button onClick="window.open('linked.html', '_blank', 'width=500,height=400,scrollbars=yes')">例３(scriptなし)</button>
  

• テスト： 例３(scriptあり) 例３(scriptなし)
• この例では、ページを次のように設定しています。
  「500x200のサイズで開く。その大きさを変更できる。スクロールバーをつける。」

主なパラメタ

上のように「名称=機能」の形式で記述します。順序は任意で「,」で区切ります。

ＦＯＲＭでリンク先のＵＲＬを指定

• 機能：ＦＯＲＭでリンク先のＵＲＬを入力します。利用者が任意のリンク先を指定できます。
  
• 記述：

  function 例４() {
  　　var リンク先ＵＲＬ = document.例４フォーム.リンク先.value;
  　　location.href = リンク先ＵＲＬ;
  }
  -----
  <form name="例４フォーム">
  　<label>リンク先<input type="text" name="リンク先" value="linked.html"></label>
  　<button type="button" onClick="例４();">例４実行</button>
  </form>
  

• テスト：
  リンク先 例４実行