用JS打开新窗口,防止被浏览器阻止的方法

相信做web前端或者使用JS的朋友都会遇到需要在新窗口打开页面的情况,现在浏览器大都具有弹出窗口拦截功能,所以传统的window.open()不再那么好用了。借鉴于网上查到的方法和我个人的实践,把弹出新窗口的方法给大伙都介绍一下。

第一种、使用原生javascript的window.open()方法(大部分情况下会被浏览自阻止)

第二种、模拟表单(form)提交,原理是指定表单的action为想要打开的URL地址,target设置为"_blank"

不过模拟表单提交的方法经很多网友反映说也会被阻止

第三种、模拟超链接(<a>)被点击,用jquery的写法如下,注意最后openLink[0]是模拟的原生DOM对象被点击的(使用Jquery对象的话没反应)

var openLink = $("");
openLink.attr('href', 'URL地址');
openLink[0].click();

这种方法个人比较推荐的,因为简单方便

第四种、利用浏览器的冒泡事件(这种方法稍微有点复杂,呵呵)

clickOpenWin: function(f){
var dataKey = "clickOpenWin.dataKey"
var me = $(this);
var A = me.data(dataKey);

var returnData = null;
if(!A){
A = $("");
me.data(dataKey, A);
A.click(function(e){
if(returnData){
A.attr("href", returnData);
}else {
A.before(me);
e.stop();
}
});
}
me.mouseover(function(){$(this).before(A).appendTo(A);});
me.mouseout(function(){A.before($(this));});
me.click(function(){
A.attr("href", "#|");
returnData = f.apply(this, arguments);
});
}

1. 首先,说一下最终的效果,是实现用 “A” 包含你要触发弹窗的元素,原来的click事件要返回弹窗的URL 对应这一句 “returnData = f.apply(this, arguments);”

2. 然后就要说到弹窗拦截的策略了,具体我就不说了,反正 策略里是不会拦截 “A” 本身吧

3. 最后就是合成了,用A包含后,因为事件会冒泡,所以利用正常的点击,生成动态的 链接地址 给A,触发A的原始点击事件,就完成了
在Vue draggable库中,如果在拖拽过程中意外地打开了新的浏览器窗口,这通常是因为在`@dragstart`或`@drop`等钩子里的事件处理函数中包含了链接跳转或者其他会触发默认行为的操作。要防止这种情况,可以采取以下措施: 1. **检查并移除可能导致跳转的元素**:如果你在拖动目标上绑定了点击操作,确保这个点击事件不会直接导致新窗口打开。检查是否有`<a>`标签或其他可能会触发默认行为的元素。 ```html <draggable v-model="items" @dragstart.prevent> <div v-for="(item, index) in items" :key="index"> <!-- 确保没有直接点击跳转的<a>标签 --> <button @click="$event.stopPropagation()">拖动</button> <p>{{ item.name }}</p> </div> </draggable> ``` 2. **使用`event.preventDefault()`**:在`@dragstart`事件中添加`event.preventDefault()`来阻止浏览器默认的行为,包括新窗口打开。 ```javascript <draggable @dragstart.prevent="preventDefaultHandler"> ... </draggable> methods: { preventDefaultHandler (event) { event.preventDefault(); } } ``` 3. **仅在需要时才执行跳转**:如果你确实有需要跳转的情况,可以在完成拖放操作后执行。例如,使用`@drop`事件处理函数。 ```javascript <draggable @drop="handleDrop"> ... </draggable> methods: { handleDrop (e) { // 检查是否满足跳转条件 if (/* 需要跳转的条件 */) { window.open('https://example.com', '_blank'); } } } ``` 通过以上调整,你可以限制在Vue draggable组件中的拖拽行为不会自动打开新窗口
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值