基本原则:强烈建议在站点中不要使用window.open方法

      我们知道在前台开发中,经常遇到需要通过脚本打开一个新页面的需求,这种情况下,我们经常用的可能方法是调用方法window.open方法,该方法的基本使用方法很简单:

	oNewWindow = window.open( [sURL] [, sName] [, sFeatures] [, bReplace])
     通过输入指定的sURL参数,而sName若打开新窗口设置‘_blank’即可,但window.open方法的一个很大的不足是容易被屏蔽,特别是
浏览器的安全级别设置比较高的情况下,而一些浏览器安装后的默认设置就是屏蔽弹出窗口,而通过脚本window.open方法打开的新页面基本都
在拦截的范畴内。也想你认为这个没什么,用户只要多点击一次取消浏览器的拦截皆可,但作为一个一流的站点来说,这就是一个bug,一个严重
影响用户体验,甚至严重影响收入的一个大问题,因此强烈建议在站点中不要使用window.open方法。
    但是,不使用window.open方法,还有什么方法可以用来打开一个新窗口呢?笔者目前想到几个方法如下:
1,利用原生的A标签进行跳转,这是目前认为最有效的方法。
     通过设置a标签的href属性,而target='_blank',并且对逻辑判断逻辑作为一个函数注册到a的onclick事件里面,如下所示:
    <a href='http://www.sample.com/example.html' targetr="_blank" οnclick="javascript:return doHandler(this);"> click me</a>
而doHandler函数的逻辑是根据业务流程进行判断,若需要进行跳转则进行return true,若不跳转则返回false即可。
那这样实现的理由是什么呢?其实很简单,对浏览器来说,a的跳转是一个很正常的页面跳转,因此拦截插件不对正常的页面跳转进行拦截(不过笔者发现,
在一些浏览器设置最高的安全级别或者屏蔽所有的弹出窗口时,这个也会被拦截),而当用户点击a标签的时候,浏览器优先执行onclick的点击事件,而我们
正是注册一个事件在这里进行处理,onclick事件执行完毕后,浏览器判断是否进行事件冒泡,如果我们return true,则意味着事件继续进行冒泡,事件
进一步的往上抛,进行进一步的处理,而对a标签来说,就是执行默认行为:打开href属性指定的页面,若return false,则阻止事件冒泡,
使得浏览器没有机会执行默认行为---打开新页面。
      我们正式利用浏览器优先处理onclick事件和适当控制事件的冒泡达到根据我们的业务逻辑进行打开新页面或者不打开的控制。
      在一般的场合下,我们这种方式就可以替换window.open了,但若我们需要某种特殊条件判断来决定是否进行跳转,而这个特殊条件的判断
是需要跟服务器进行一次异步的交互呢?这种情况比较麻烦,因为点击a标签的事件无法在异步回调函数里面进行传递,因此也就无法控制事件的冒泡
决定是否打开页面,这种方式的变通方法就是把这个异步交互置前,放到点击之前处理,先进行跟服务器交互,然后把对应的状态设置到一个全局变量
或者某个缓存区中,但用户点击的时候,只需要判断对应的变量即可,通过这样的处理,这种方法还是可行的。
    在笔者的项目中,这种方法已经通过了测试,在设置浏览器屏蔽窗口的情况下,IE6,7,8, FF2.0,FF3.0, FF3.5, chrome2.0, 遨游的一些版本,
以及TT的常用版本和最新版本均能够正常打开新页面而不被拦截。
2,另外一种方案可以构建一个表单,通过表单进行提交。
   该方案笔者将会进一步的进行测试。。。
  
使用 `window.open()` 函数创建一个新的窗口时,无法直接获取该窗口的返回值。这是因为该函数是异步的,新打开的窗口需要时间来加载和处理内容,而 JavaScript 代码会继续执行,无法等待窗口加载完成后再获取返回值。 但是,可以通过在新窗口执行 JavaScript 代码来将返回值传递回原始窗口。具体方法如下: 1. 在打开新窗口时,给该窗口添加一个唯一的标识符,例如一个随机数或者时间戳。 2. 在新窗口定义一个 JavaScript 函数,该函数将需要返回的值作为参数,然后调用原始窗口的一个 JavaScript 函数,并将返回值作为参数传递给它。 ```javascript function sendValueToParent(value) { window.opener.receiveValueFromChild(value); } ``` 3. 在原始窗口定义一个 JavaScript 函数,该函数将接收从新窗口传递过来的值。 ```javascript function receiveValueFromChild(value) { console.log(value); } ``` 4. 在打开新窗口的代码,为 `window.open()` 函数设置一个定时器,定期检查新窗口是否已经加载完毕。如果新窗口已经加载完毕,则调用在新窗口定义的 JavaScript 函数,将返回值传递回原始窗口。 ```javascript var childWindow = window.open('child.html?id=123456', '_blank'); var intervalId = setInterval(function() { if (childWindow.closed) { clearInterval(intervalId); } else if (childWindow.document.readyState === 'complete') { childWindow.sendValueToParent('Hello, World!'); clearInterval(intervalId); } }, 1000); ``` 需要注意的是,该方法只适用于在同一个域名下打开的新窗口。如果打开的是外部网站或者跨域的页面,则无法通过 JavaScript 直接访问该页面的内容,也无法获取该页面的返回值。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值