ホームページ > 記事 > ウェブフロントエンド > Web ページ上の任意の場所をクリックして新しいウィンドウを開き、ウィンドウを閉じるための JavaScript 実装コード

Web ページ上の任意の場所をクリックして新しいウィンドウを開き、ウィンドウを閉じるための JavaScript 実装コード

小云云オリジナル: 2018-02-07 11:26:261991ブラウズ

一部の不規則な Web サイト、特に広告が満載のダウンロードサイトでは、ダウンロードリンクをクリックする前に Web ページのどこをクリックしても、新しいウィンドウがポップアップします。この記事では、JavaScript を使用して Web ページ上の任意の場所をクリックして新しいウィンドウを開く方法と、JavaScript ウィンドウの使用方法を中心に説明します。必要な方は参考にしてください。あなたを助けられる。

このような効果は JavaScript で簡単に実現でき、特定の領域の p をクリックして新しいウィンドウを開くイベントをトリガーすることもできます。

たとえば、以下の図の効果:

元の Web ページで、p を指定すると、ユーザーが p のどの領域をクリックしても、新しいウィンドウが開きますが、他の場所をクリックすると、ない。

新しいウィンドウのアドレスバーは編集またはサイズ変更できません。ウィンドウを閉じるための「閉じる」ボタンがあります。

元の Web ページの HTML レイアウトは次のとおりです。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
  </head>
  <body>
    <p class="testClass" style="height:100px;border:1px solid #cccccc">点击此任意一处打开广告</p>
  </body>
</html>

何も言うことはありません。クラス testClass の p だけです。

キーは次のスクリプトです。

<script type="text/javascript">
  document.onclick = function(e){//设置整个网页的单击事件
    e = e || window.event;//为了兼容这样写。
    var target = e.target || e.srcElement;//用来点击的对象。为了兼容这样写。
    if (target.className == "testClass"){//如果点击的对象，class为testClass，那么打开新窗口。
      var OpenWindow=window.open("","newwindow","height=100","width=400","top=100","left=0","toolbar=false","menubar=false","scrollbars=false","resizable=false","location=false","status=false");
      //在新窗口中写入如下的HTML代码。
      OpenWindow.document.write("广告<br/>");
      //在Javascript中，利用window.close()可以关闭当前窗口，但不能关闭当前标签页，不过由于这个窗口是我们自己新生成的，因此对于所有浏览器有效
      OpenWindow.document.write("<button onclick=&#39;javascript:window.close()&#39;>关闭！</button>");
    }
  }
</script>

上記のスクリプトからわかるように、window.open()このメソッドのパラメータは非常に長いです。

その中には:

最初のパラメータが空の場合、新しいウィンドウのリンクが既存の Web ページではないことを意味します。新しいウィンドウのコンテンツは、次の 2 行の Javascript によって生成されます。新しいウィンドウのコンテンツが既存の Web ページである必要がある場合は、対応する URL を入力します。

以降のパラメータは以下の意味を持ちますが、IEのみ有効です。

newwindow: ポップアップウィンドウの名前 (ファイル名ではありません) はオプションで、空の '' に置き換えることができます。
height=100: 新しいウィンドウの高さ。
width=400: 新しいウィンドウの幅。
top=0: 現在のウィンドウの上にある新しいウィンドウのピクセル値。
left=0: 現在のウィンドウの左側からのウィンドウのピクセル値。
toolbar=false: ツールバー、メニューバー、スクロールバーを表示するかどうかは、メニューバーとスクロールバーを表します。
resizable=false: ウィンドウサイズの変更を許可するかどうか
location=false: 新しいウィンドウのアドレスバーを有効にするかどうか
status=false: ステータスバーを表示するかどうか。

Web ページ上の任意の場所をクリックして新しいウィンドウを開き、ウィンドウを閉じるための JavaScript 実装コード

関連記事