Rumah hujung hadapan web tutorial js JavaScript单击网页任意位置打开新窗口以及关闭窗口的实现方法

JavaScript单击网页任意位置打开新窗口以及关闭窗口的实现方法

Sep 22, 2017 am 09:28 AM
javascript js Lokasi

这篇文章主要介绍了JavaScript实现单击网页任意位置打开新窗口与关闭窗口的方法,涉及javascript窗口的相关操作函数与使用技巧,需要的朋友可以参考下

本文实例讲述了JavaScript实现单击网页任意位置打开新窗口与关闭窗口的方法。分享给大家供大家参考,具体如下:

在一些不正规的网站,尤其是那些挂满广告的下载站,经常在你点击的下载链接之前,无论你点击网页的任何一处都会弹出新窗口。

这样的效果,可以轻松用JavaScript做到,还可以专门指定点击某一区域的p,才触发打开新窗口的事件。

比如下图的效果:

在原网页中,指定一个p,无论用户点击这个p的任意区域,都会打开新窗口,而点击其它地方则不会。

在新窗口的地址栏不可以编辑,不能被调整大小,提供一个“关闭”按钮,关闭该窗口。

原网页的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>
Salin selepas log masuk

没什么好说的,就一个class为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>
Salin selepas log masuk

从以上的脚本可以看到window.open()这个方法参数很长。

其中:

第一个参数为空的意思,则意为新窗口的链接不是已有的网页,新窗口的内容是通过以下的两行Javascript生成的。如果要求新窗口的内容是已有的网页,则填写相应的url。

之后的参数是如下的意思,但只是对IE有效。

newwindow:弹出窗口的名字(不是文件名),非必须,可用空''代替。
height=100:新窗口高度。
width=400:新窗口宽度。
top=0:新窗口距离当前窗口上方的像素值。
left=0:窗口距离当前窗口左侧的像素值。
toolbar=false:是否显示工具栏,menubar,scrollbars表示菜单栏和滚动栏。
resizable=false:是否允许改变窗口大小
location=false:是否启用新窗口地址栏
status=false:是否显示状态栏。

Atas ialah kandungan terperinci JavaScript单击网页任意位置打开新窗口以及关闭窗口的实现方法. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Tetapan grafik terbaik
3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Cara Memperbaiki Audio Jika anda tidak dapat mendengar sesiapa
3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: Cara Membuka Segala -galanya Di Myrise
3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Laluan permulaan Win11 dan cara membukanya Laluan permulaan Win11 dan cara membukanya Jan 03, 2024 pm 11:13 PM

Setiap sistem Windows mempunyai laluan permulaan Jika anda menambah fail atau perisian padanya, ia akan dibuka pada masa but. Walau bagaimanapun, ramai rakan tidak tahu di mana laluan permulaan win11 sebenarnya, kita hanya perlu memasukkan folder yang sepadan pada pemacu C. Laluan permulaan Win11: 1. Klik dua kali untuk membuka "PC ini" 2. Tampal terus laluan "C:\ProgramData\Microsoft\Windows\StartMenu\Programs\Startup" ke dalam kotak laluan. 3. Berikut ialah laluan permulaan win11 Jika kita ingin membuka fail selepas boot, kita boleh memasukkan fail tersebut. 4. Jika anda tidak boleh masuk mengikut laluan ini, ia mungkin tersembunyi.

Fahami lokasi dan struktur penyimpanan pakej pemasangan pip Fahami lokasi dan struktur penyimpanan pakej pemasangan pip Jan 18, 2024 am 08:23 AM

Untuk mengetahui lebih lanjut tentang lokasi storan pakej yang dipasang oleh pip, anda memerlukan contoh kod khusus Pip ialah alat pengurusan pakej yang biasa digunakan dalam bahasa Python Ia digunakan untuk memasang, meningkatkan dan mengurus pakej Python dengan mudah. Apabila menggunakan pip untuk memasang pakej, ia akan memuat turun fail pakej yang sepadan secara automatik daripada PyPI (Python Package Index) dan memasangnya ke lokasi yang ditentukan. Jadi, di manakah pakej yang dipasang oleh pip disimpan? Ini adalah masalah yang akan dihadapi oleh ramai pembangun Python. Artikel ini akan menyelidiki lokasi pakej yang dipasang oleh pip dan menyediakan

Disyorkan: Projek pengesanan dan pengecaman muka sumber terbuka JS yang sangat baik Disyorkan: Projek pengesanan dan pengecaman muka sumber terbuka JS yang sangat baik Apr 03, 2024 am 11:55 AM

Teknologi pengesanan dan pengecaman muka adalah teknologi yang agak matang dan digunakan secara meluas. Pada masa ini, bahasa aplikasi Internet yang paling banyak digunakan ialah JS Melaksanakan pengesanan muka dan pengecaman pada bahagian hadapan Web mempunyai kelebihan dan kekurangan berbanding dengan pengecaman muka bahagian belakang. Kelebihan termasuk mengurangkan interaksi rangkaian dan pengecaman masa nyata, yang sangat memendekkan masa menunggu pengguna dan meningkatkan pengalaman pengguna termasuk: terhad oleh saiz model, ketepatannya juga terhad. Bagaimana untuk menggunakan js untuk melaksanakan pengesanan muka di web? Untuk melaksanakan pengecaman muka di Web, anda perlu biasa dengan bahasa dan teknologi pengaturcaraan yang berkaitan, seperti JavaScript, HTML, CSS, WebRTC, dll. Pada masa yang sama, anda juga perlu menguasai visi komputer yang berkaitan dan teknologi kecerdasan buatan. Perlu diingat bahawa kerana reka bentuk bahagian Web

Lokasi Burung Origami di Taman Filem dan Televisyen Stardome Railway Crocker Lokasi Burung Origami di Taman Filem dan Televisyen Stardome Railway Crocker Mar 27, 2024 pm 11:51 PM

Terdapat sejumlah 20 burung origami di Taman Filem dan Televisyen Croaker di Star Dome Railway Ramai pemain tidak tahu di mana burung origami berada di Taman Filem dan Televisyen Crocker. Editor telah meringkaskan lokasi setiap burung origami untuk membantu semua orang . Carinya, dan lihat ringkasan terkini lokasi burung origami di Taman Filem dan Televisyen Croaker untuk kandungan tertentu. Panduan ke Kereta Api Kubah Bintang Honkai: Burung Origami di Crook Movie Park Lokasi 1, Crook Movie Park Tingkat 1 2 dan Crook Movie Park Tingkat 2 Star Dome Railway

Di manakah Kuaishou diterbitkan dan bagaimana untuk menukar lokasinya? Bagaimana untuk menambah lokasi pada video yang telah dimuat naik? Di manakah Kuaishou diterbitkan dan bagaimana untuk menukar lokasinya? Bagaimana untuk menambah lokasi pada video yang telah dimuat naik? Mar 21, 2024 pm 06:00 PM

Sebagai platform video pendek yang terkenal di China, Kuaishou menyediakan banyak pencipta peluang untuk mempamerkan bakat mereka dan berkongsi kehidupan mereka. Semasa memuat naik video, sesetengah pencipta pemula mungkin keliru tentang cara menukar lokasi siaran video. Artikel ini akan memperkenalkan anda tentang cara menukar lokasi penerbitan video Kuaishou dan berkongsi beberapa petua untuk penerbitan video Kuaishou untuk membantu anda menggunakan platform ini dengan lebih baik untuk mempamerkan hasil kerja anda. 1. Di manakah Kuaishou diterbitkan dan bagaimana untuk menukar lokasinya? 1. Antara muka penerbitan: Dalam Kuaishou APP, klik butang "Terbitkan" untuk memasuki antara muka penerbitan video. 2. Maklumat lokasi: Dalam antara muka penerbitan, terdapat lajur "Lokasi" Klik untuk memasuki antara muka pemilihan lokasi. 3. Tukar lokasi: Dalam antara muka pemilihan lokasi, klik butang "Lokasi" untuk melihat lokasi semasa. Jika anda ingin menukar lokasi, klik "Lokasi"

Cara menukar lokasi Rumah Peta Gaode Cara menukar lokasi Rumah Peta Gaode Feb 27, 2024 pm 07:31 PM

Sebagai pembantu yang berkuasa untuk perjalanan harian kami, Amap bukan sahaja menyediakan perkhidmatan navigasi yang tepat, tetapi juga membenarkan pengguna menentukan "lokasi rumah" mereka secara langsung dengan cara yang mesra pengguna. Adalah mudah untuk menyemak laluan pulang anda setiap kali. Tetapi kadangkala lokasi rumah kita juga perlu dikemas kini, jadi bagaimana kita boleh mengubah suai "lokasi rumah" dengan mudah di Amap Seterusnya, ikuti panduan editor dan pelajari cara mengubahnya bersama-sama! rumah? Jawapan: [AMAP] - [Tetapan] - [Ikon tiga titik] - [Ubah suai lokasi] - [Tetapkan lokasi] - [Tetapkan sebagai alamat rumah]. Langkah-langkah khusus: 1. Mula-mula buka perisian Amap, masukkan halaman utama, slaid ke atas, cari rumah dan klik [Tetapan] 2. Kemudian dalam halaman tetapan, kita boleh;

Di manakah terletaknya Arena Era Terakhir? Di manakah terletaknya Arena Era Terakhir? Mar 07, 2024 pm 08:16 PM

Dalam "Zaman Terakhir", pemain boleh bermain dalam pelbagai mod seperti mod permainan, mod cabaran dan arena, dsb. Arena ialah cara terbaik untuk bermain permainan, menyediakan dua mod untuk dipilih oleh pemain. Di manakah Arena di Era Terakhir Jawapan: Arena ialah permainan akhir, dan lokasi khususnya adalah di Gerbang Juara. Anda perlu mendapatkan Kunci Arena atau Kunci Arena Memori Selepas mengklik kanan, anda boleh melihat peta dunia dan mencari lokasi khusus Gerbang Juara. Arena ini dibahagikan kepada dua mod utama: Mod Kejuaraan Arena dan Mod Arena Tanpa Kesudahan. Yang pertama termasuk 40 gelombang musuh dan ganjaran terpilih, sentiasa memuncak dalam pertempuran dengan Juara Arena. Terdapat 4 peringkat dalam Mod Kejuaraan Arena Lebih tinggi kesukaran, lebih baik ganjarannya. Arena Endless ialah mod dengan ombak tak terhingga Kesukaran secara beransur-ansur meningkat

Di manakah lokasi Baucar Harian Meituan_Pengenalan lokasi Baucar Harian Meituan Di manakah lokasi Baucar Harian Meituan_Pengenalan lokasi Baucar Harian Meituan Mar 27, 2024 pm 05:11 PM

1. Kami membuka Meituan pada telefon mudah alih, dan kemudian klik pada pilihan bawa pulang di penjuru kiri sebelah atas halaman utama. 2. Selepas memasuki halaman platform bawa pulang, anda boleh melihat bahagian dengan kupon harian di halaman utama, klik padanya terus. 3. Selepas memasuki Tiantian God Voucher, anda akan melihat banyak aktiviti, klik Selesai, dan kemudian kita boleh mendapat ganjaran selepas menyelesaikan tugasan.

See all articles