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

小云云
リリース: 2018-02-07 11:26:26
オリジナル
1997 人が閲覧しました

一部の不規則な 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: ステータスバーを表示するかどうか。

関連する推奨事項:

ハイパーリンクを使用して新しいウィンドウを開き、HTML でそのプロパティを制御する方法

ハイパーリンクを使用して新しいウィンドウを開き、HTML でウィンドウのプロパティを制御する方法

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


以上がWeb ページ上の任意の場所をクリックして新しいウィンドウを開き、ウィンドウを閉じるための JavaScript 実装コードの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート