JavaScript窗口功能指南之引用已打开的窗口

javascript 专栏收录该内容
11 篇文章 0 订阅
JavaScript窗口功能指南之引用已打开的窗口
(作者:听风编译 2001年01月19日 11:35)

  如果你想关联一个指定的窗口,你可以使用< A >标记的TARGET属性。除非你分配,一个浏览器窗口不会有一个名字。当你使用TARGET属性通过一个链接打开一个新窗口时,你就分配给它了一个清晰的名字:

  <A HREF="http://www.intel.com/" TARGET="review">Intel</A>

  前面的链接打开一个新窗口,名叫review。下面的链接通过JavaScript产生同样的效果:

  <A HREF="http://www.intel.com/"

   onClick="window.open('http://www.intel.com/', 'review'); return false">Intel</A>

  如你所见,给一个新窗口分配一个名字是非常简单的事情。但是,给一个存在的窗口命名,或者给一个用户产生的窗口命名,又会怎样呢?

  window对象的name属性可以让你通过JavaScript设置任何窗口的名字。如果你想建立一个新窗口,它可以关联父窗口的链接和表单,就一定要分配给打开者一个名字:

  window.name = "main";

  var map = window.open("newpage.html", "map");

  如果在newpage.html中包含了下面的链接,就会在父窗口中装载下面的页面:

  <A HREF="http://www.docjs.com/" TARGET="main">Doc JavaScript</A>

打开者的属性
  opener属性设置或者取回创建当前窗口的那个窗口的引用。当调用open()方法在目标窗口打开一个源文档时,opener属性(隶属于目标窗口的window对象)就定义了源文档所在的窗口。这个属性在打开的窗口中一直存在,所以即使新窗口中的URL改变时,它仍旧可以访问。

  opener属性是父窗口window对象的引用,所以你就可以充分利用这个属性,通过脚本程序,在新窗口中执行对打开窗口的任何操作。比如,在目标文档中使用下面的脚本程序去修改打开窗口的背景色彩:

  window.opener.document.bgColor = "beige";

  呵呵,如果你目光敏锐,你也许注意到上面这个语句的错误。我们必须检查是否打开窗口仍然存在,然后才能决定去修改它的相关属性。下面是正确的代码:

  if (window.opener && !window.opener.closed)

   window.opener.document.bgColor = "beige";

  opener属性非常有用,因为它建立了打开窗口与被打开窗口之间的双向联系。

  让我们给出个实际的例子,看看它是如果工作的,下面是出现在主页面上表单的HTML代码:

  <FORM NAME="stockForm">Enter your favorite tech stock:

  <INPUT TYPE="text" NAME="stockBox" SIZE="10" VALUE="">

  <INPUT TYPE="button" VALUE="list" onClick="showList()">

  </FORM>

  注意,表单的名字是stockForm,文本域的名字是stockBox,“list”按钮激活showList()函数。同时,在文档的

  < Body >标记中设置onUnload事件处理程序,它将执行remLink()函数。下面是这2个函数的代码:

  <SCRIPT LANGUAGE="JavaScript">

  <!--

  function showList() {

   sList = window.open("stocklist.html", "list", "width=150,height=210");

  }

  function remLink() {

   if (window.sList && window.sList.open && !window.sList.closed)

    window.sList.opener = null;

  }

  // -->

  </SCRIPT>

  当前文档被卸载时,remLink()函数设置子窗口的opener属性为null。新窗口中的脚本程序在分配文本域数值前检查opener属性。我们必须使用这个函数,因为如果一个不同文档在新窗口中被装载,这个窗口的脚本程序就不能访问文本框。

  下面是stocklist.html的代码:

  <HTML>

  <HEAD>

  <TITLE>Stock List</TITLE>

  <SCRIPT LANGUAGE="JavaScript">

  <!--

  function pick(symbol) {

   if (window.opener && !window.opener.closed)

    window.opener.document.stockForm.stockBox.value = symbol;

   window.close();

  }

  // -->

  </SCRIPT>

  </HEAD>

  <BODY>

  <TABLE BORDER="1" CELLSPACING="0" CELLPADDING="5">

  <TR BGCOLOR="#cccccc"><TD><B>NYSE</B></TD><TD><B>NASDAQ</B></TD></TR>

  <TR><TD><A HREF="javascript:pick('AOL')">AOL</A></TD>

  <TD><A HREF="javascript:pick('CSCO')">CSCO</A></TD></TR>

  <TR><TD><A HREF="javascript:pick('CPQ')">CPQ</A></TD>

  <TD><A HREF="javascript:pick('INTC')">INTC</A></TD></TR>

  <TR><TD><A HREF="javascript:pick('NOK')">NOK</A></TD>

  <TD><A HREF="javascript:pick('SUNW')">SUNW</A></TD></TR>

  <TR><TD><A HREF="javascript:pick('LU')">LU</A></TD>

  <TD><A HREF="javascript:pick('AMZN')">AMZN</A></TD></TR>

  <TR><TD><A HREF="javascript:pick('T')">T</A></TD>

  <TD><A HREF="javascript:pick('MSFT')">MSFT</A></TD></TR>

  </TABLE>

  </BODY>

  </HTML>
  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

相关推荐
<p> <span style="font-size:14px;color:#337FE5;">【为什么学爬虫?】</span> </p> <p> <span style="font-size:14px;">       1、爬虫入手容易,但是深入较难,如何写出高效率爬虫,如何写出灵活性高可扩展爬虫都是一项技术活。另外在爬虫过程中,经常容易遇到被反爬虫,比如字体反爬、IP识别、验证码等,如何层层攻克难点拿到想要数据,这门课程,你都能学到!</span> </p> <p> <span style="font-size:14px;">       2、如果是作为一个其他行业开发者,比如app开发,web开发,学习爬虫能让你加强对技术认知,能够开发出更加安全软件和网站</span> </p> <p> <br /> </p> <span style="font-size:14px;color:#337FE5;">【课程设计】</span> <p class="ql-long-10663260"> <span> </span> </p> <p class="ql-long-26664262" style="font-size:11pt;color:#494949;"> 一个完整爬虫程序,无论大小,总体来说可以分成三个步骤,分别是: </p> <ol> <li class="" style="font-size:11pt;color:#494949;"> 网络请求:模拟浏览器行为从网上抓取数据。 </li> <li class="" style="font-size:11pt;color:#494949;"> 数据解析:将请求下来数据进行过滤,提取我们想要数据。 </li> <li class="" style="font-size:11pt;color:#494949;"> 数据存储:将提取到数据存储到硬盘或者内存中。比如用mysql数据库或者redis等。 </li> </ol> <p class="ql-long-26664262" style="font-size:11pt;color:#494949;"> 那么本课程也是按照这几个步骤循序渐进进行讲解,带领学生完整掌握每个步骤技术。另外,因为爬虫多样性,在爬取过程中可能会发生被反爬、效率低下等。因此我们又增加了两个章节用来提高爬虫程序灵活性,分别是: </p> <ol> <li class="" style="font-size:11pt;color:#494949;"> 爬虫进阶:包括IP代理,多线程爬虫,图形验证码识别、JS加密解密、动态网页爬虫、字体反爬识别等。 </li> <li class="" style="font-size:11pt;color:#494949;"> Scrapy和分布式爬虫:Scrapy框架、Scrapy-redis组件、分布式爬虫等。 </li> </ol> <p class="ql-long-26664262" style="font-size:11pt;color:#494949;"> 通过爬虫进阶知识点我们能应付大量反爬网站,而Scrapy框架作为一个专业爬虫框架,使用他可以快速提高我们编写爬虫程序效率和速度。另外如果一台机器不能满足你需求,我们可以用分布式爬虫让多台机器帮助你快速爬取数据。 </p> <p style="font-size:11pt;color:#494949;">   </p> <p class="ql-long-26664262" style="font-size:11pt;color:#494949;"> 从基础爬虫到商业化应用爬虫,本套课程满足您所有需求! </p> <p class="ql-long-26664262" style="font-size:11pt;color:#494949;"> <br /> </p> <p> <br /> </p> <p> <span style="font-size:14px;background-color:#FFFFFF;color:#337FE5;">【课程服务】</span> </p> <p> <span style="font-size:14px;">专属付费社群+定期答疑</span> </p> <p> <br /> </p> <p class="ql-long-24357476"> <span style="font-size:16px;"><br /> </span> </p> <p> <br /> </p> <p class="ql-long-24357476"> <span style="font-size:16px;"></span> </p>
<div style="color:rgba(0,0,0,.75);"> <span style="color:#4d4d4d;"> </span> <div style="color:rgba(0,0,0,.75);"> <span style="color:#4d4d4d;"> </span> <div style="color:rgba(0,0,0,.75);"> <div style="color:rgba(0,0,0,.75);"> <span style="color:#4d4d4d;">当前课程中商城项目实战源码是我发布在 GitHub 上开源项目 newbee-mall (新蜂商城),目前有 6300 多个 star,</span><span style="color:#4d4d4d;">本课程是一个 Spring Boot 技术栈实战类课程,课程共分为 3 大部分,前面两个部分为基础环境准备和相关概念介绍,第三个部分是 Spring Boot 商城项目功能讲解,让大家实际操作并实践上手一个大型线上商城项目,并学习到一定开发经验以及其中开发技巧。<br /> 商城项目所涉及功能结构图整理如下:<br /> </span> </div> <div style="color:rgba(0,0,0,.75);">   </div> <div style="color:rgba(0,0,0,.75);"> <p style="color:#4d4d4d;"> <img alt="modules" src="https://imgconvert.csdnimg.cn/aHR0cHM6Ly9uZXdiZWUtbWFsbC5vc3MtY24tYmVpamluZy5hbGl5dW5jcy5jb20vcG9zdGVyL3N0b3JlL25ld2JlZS1tYWxsLXMucG5n?x-oss-process=image/format,png" /> </p> </div> <p style="color:rgba(0,0,0,.75);"> <strong><span style="color:#e53333;">课程特色</span></strong> </p> <p style="color:rgba(0,0,0,.75);">   </p> <div style="color:rgba(0,0,0,.75);">   </div> <div style="color:rgba(0,0,0,.75);"> <ul> <li> 对新手开发者十分友好,无需复杂操作步骤,仅需 2 秒就可以启动这个完整商城项目 </li> <li> 最终实战项目是一个企业级别 Spring Boot 大型项目,对于各个阶段 Java 开发者都是极佳选择 </li> <li> 实践项目页面美观且实用,交互效果完美 </li> <li> 教程详细开发教程详细完整、文档资源齐全 </li> <li> 代码+讲解+演示网站全方位保证,向 Hello World 教程说拜拜 </li> <li> 技术栈新颖且知识点丰富,学习后可以提升大家对于知识理解和掌握,可以进一步提升你市场竞争力 </li> </ul> </div> <p style="color:rgba(0,0,0,.75);">   </p> <p style="color:rgba(0,0,0,.75);"> <span style="color:#e53333;">课程预览</span> </p> <p style="color:rgba(0,0,0,.75);">   </p> <div style="color:rgba(0,0,0,.75);">   </div> <div style="color:rgba(0,0,0,.75);"> <p style="color:#4d4d4d;"> 以下为商城项目页面和功能展示,分别为: </p> </div> <div style="color:rgba(0,0,0,.75);"> <ul> <li> 商城首页 1<br /> <img alt="" src="https://img-bss.csdnimg.cn/202103050347585499.gif" /> </li> <li> 商城首页 2<br /> <img alt="" src="https://img-bss.csdn.net/202005181054413605.png" /> </li> <li>   </li> <li> 购物车<br /> <img alt="cart" src="https://imgconvert.csdnimg.cn/aHR0cHM6Ly9uZXdiZWUtbWFsbC5vc3MtY24tYmVpamluZy5hbGl5dW5jcy5jb20vcG9zdGVyL3Byb2R1Y3QvY2FydC5wbmc?x-oss-process=image/format,png" /> </li> <li> 订单结算<br /> <img alt="settle" src="https://imgconvert.csdnimg.cn/aHR0cHM6Ly9uZXdiZWUtbWFsbC5vc3MtY24tYmVpamluZy5hbGl5dW5jcy5jb20vcG9zdGVyL3Byb2R1Y3Qvc2V0dGxlLnBuZw?x-oss-process=image/format,png" /> </li> <li> 订单列表<br /> <img alt="orders" src="https://imgconvert.csdnimg.cn/aHR0cHM6Ly9uZXdiZWUtbWFsbC5vc3MtY24tYmVpamluZy5hbGl5dW5jcy5jb20vcG9zdGVyL3Byb2R1Y3Qvb3JkZXJzLnBuZw?x-oss-process=image/format,png" /> </li> <li> 支付页面<br /> <img alt="" src="https://img-bss.csdn.net/201909280301493716.jpg" /> </li> <li> 后台管理系统登录页<br /> <img alt="login" src="https://imgconvert.csdnimg.cn/aHR0cHM6Ly9uZXdiZWUtbWFsbC5vc3MtY24tYmVpamluZy5hbGl5dW5jcy5jb20vcG9zdGVyL3Byb2R1Y3QvbWFuYWdlLWxvZ2luLnBuZw?x-oss-process=image/format,png" /> </li> <li> 商品管理<br /> <img alt="goods" src="https://imgconvert.csdnimg.cn/aHR0cHM6Ly9uZXdiZWUtbWFsbC5vc3MtY24tYmVpamluZy5hbGl5dW5jcy5jb20vcG9zdGVyL3Byb2R1Y3QvbWFuYWdlLWdvb2RzLnBuZw?x-oss-process=image/format,png" /> </li> <li> 商品编辑<br /> <img alt="" src="https://img-bss.csdnimg.cn/202103050348242799.png" /> </li> </ul> </div> </div> </div> </div>
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值