Web ページ上の任意の場所をクリックして新しいウィンドウを開き、ウィンドウを閉じることで JavaScript を実装する方法-jsチュートリアル-php.cn

Web ページ上の任意の場所をクリックして新しいウィンドウを開き、ウィンドウを閉じることで JavaScript を実装する方法

黄舟

リリース： 2017-09-22 09:28:09

オリジナル

1821 人が閲覧しました

この記事では、JavaScript を使用して Web ページ上の任意の場所をクリックして新しいウィンドウを開く方法と、JavaScript ウィンドウの関連する操作機能と使用スキルを主に紹介します

。この記事の例では、Web ページ上の任意の場所で新しいウィンドウを開いてウィンドウを閉じる方法を JavaScript を使用して実装します。詳細は次のとおりです。

一部の不規則な Web サイト、特に広告が満載のダウンロードサイトでは、Web ページのどこをクリックしても、ダウンロードリンクをクリックする前に新しいウィンドウが表示されます。。

このような効果は 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: ステータスバーを表示するかどうか。