在js中实现新窗口打开页面
我们都知道可以在html代码中使用<a href="xxxx" target="_blank"></a>这种方式来打开一个新的窗口打开一个页面,但是有很多时候,我们需要在某段js代码中去打开一个新的窗口实现页面跳转。有如下几种方法来实现这个功能。
1.Window.open()方法,比如如下代码,将打开baidu首页。
window.open("http://www.baidu.com")
但是这个方法是有问题的,那就是有些浏览器会拦截。所以我们需要第二种方法,也是本文主要介绍的方法。
2.模拟form表单提交来打开一个新的页面
它的主要思路就是动态构建一个隐藏的form表单,将其target设为“_blank”,然后在动态构建起表单参数,最后手动触发起click事件。
举个例子,我们要在一段js代码中打开http://www.baidu.com?a=1这个链接。我们可以用如下的代码来实现。
//js代码
var form='<form action="https://www.baidu.com" target="_blank" id="windowOpen" style="display:none">';
form+='<input name="a" value=1 />';
form+='</form>';
$('body').append(form);
$('#windowOpen').submit();
$('#windowOpen').remove();
当然,我们可以将上述代码封装成一个函数,函数传入两个参数,一个是url,另外一个是参数param,其中param是一个js对象。
function open_page(url, param) {
var form = '<form action="' + url + '" target="_blank" id="windowOpen" style="display:none">';
for(var key in param) {
form += '<input name="' + key + '" value="' + param[key] + '"/>';
}
form += '</form>';
$('body').append(form);
$('#windowOpen').submit();
$('#windowOpen').remove();
}
这样,我们就可以这样来调用函数了。
var url='https://www.baidu.com';
var param={a:1};
open_page(url,param);
甚至,我们可以将它封装成一个插件,以后我们就可以直接调用这个插件了。
//模拟form表单提交打开新的页面
$.extend({
open_page: function(url, param) {
var form = '<form action="' + url + '" target="_blank" id="windowOpen" style="display:none">';
for(var key in param) {
form += '<input name="' + key + '" value="' + param[key] + '"/>';
}
form += '</form>';
$('body').append(form);
$('#windowOpen').submit();
$('#windowOpen').remove();
}
});
调用方法如下:
var url='https://www.baidu.com';
var param={a:1};
$.open_page(url,param);
PS:需要注意的是,如果是在ajax回调函数中调用上述方法,需要将async设置为false,否则浏览器还是会拦截上述弹窗。
在js中实现新窗口打开页面的更多相关文章
- 如何在Flash中新窗口打开页面而不被拦截
Flash的wmode必须是opaque或者transparent,允许Flash访问页面脚本.另外跳转必须是点击直接触发. 代码:ExternalInterface.call("windo ...
- 【模态窗口-Modeldialog】提交请求时禁止在新窗口打开页面的处理方法
在使用Window.ShowModalDialog()打开模态窗口后,在模态窗口内提交时总是会在新窗口中打开. 解决办法: 在要弹出的窗口的<head>之间加: <base targ ...
- vue-router 在新窗口打开页面的功能
项目中,需要点击链接后再新窗口打开页面,大家知道vue是单页面应用开发框架,那么也不是不可以实现这个功能 很简单,详情看下面 1.<router-link>标签实现新窗口打开 <ro ...
- vue-router在新窗口打开页面
1. <router-link>标签实现新窗口打开: <router-link target="_blank" :to="{path:'/app/dat ...
- react 在新窗口 打开页面
遇到这个需求 首先通过 Link a去尝试直接跳转.发现2个问题 1.Link跳转 会自动进行登录校验,我设想是路由没有匹配到,去验证后大致排除了. 因为这个链接 直接粘贴到浏览器 是可以访问到的. ...
- javaScript防止拦截新窗口打开页面
原文发布时间为:2009-05-04 -- 来源于本人的百度文章 [由搬家工具导入] 兼容IE.FF.GOOGLE。防止拦截。。。。 <html xmlns="http://www.w ...
- Google AdSense怎么在新窗口打开
Google AdSense早在十年前就支持在新窗口打开了,为什么我的AdSense广告还在当前页面打开? 德顺查了一下,发现最早在2007年就有网站记载,谷歌AdSense开始试验新窗口打开功能. ...
- HTML之:让网页中的<a>标签属性统一设置-如‘新窗口打开’
在开发过程中,我们往往想在页面中,给<a>设置一个统一的默认格式,例如我们想让链接:“在新窗口打开”,我们就可以使用<base>标签 在网页中添加这段代码: <head& ...
- 网页中<a>标签新窗口和location.href 新窗口打开
在网页制作过程中,经常遇到新窗口打开,一般是a超级链接或者location.href 新窗口打开形式,下面分别讲述两种之间的不同方式 1,a标签 新窗口 添加属性 target="_blan ...
随机推荐
- java网络编程(2)——UDP与TCP
首先,先介绍这两种协议: UDP:UDP 是User Datagram Protocol的简称, 中文名是用户数据报协议,是OSI(Open System Interconnection,开放式系统互 ...
- SSRF漏洞总结
SSRF漏洞:(服务端请求伪造)是一种由攻击者构造形成由服务端发起请求的一个安全漏洞.一般情况下,SSRF攻击的目标是从外网无法访问的内部系统.(正是因为它是由服务端发起的,所以它能够请求到与它相连而 ...
- 理解Android DecorView
一.DecorView为整个Window界面的最顶层View. 二.DecorView只有一个子元素为LinearLayout.代表整个Window界面,包含通知栏,标题栏,内容显示栏三块区域. 三. ...
- 提升R代码运算效率的11个实用方法——并行、效率
转载于36大数据,原文作者:Selva Prabhakaran 译者:fibears 众所周知,当我们利用R语言处理大型数据集时,for循环语句的运算效率非常低.有许多种方法可以提升你的代码运算效率 ...
- 利用ffmpeg做视频解码的顺序
这几天在实验室捣鼓着用ffmpeg做视频解码,终于把数据解出来了,虽然还没有做显示部分,不知道解码解得对不对,但料想是不会有什么问题了.回头看看这几天的工作,其间也遇到了不少问题,主要还是对ffmpe ...
- PL/SQL 基础知识简介
1.PL/SQL代码块 PL/SQL 代码块是指令的集合,支持所有的DML,NDS,DBMS_SQL,DDL. :DML 是数据操纵语言(Data Manipulation Language)包括,I ...
- g++基本用法
用法:g++[选项]文件... g++编译流程: main.cxx #include <iostream> using namespace std; int main(void) { co ...
- Linux显示本地端的文件系统
Linux显示本地端的文件系统 youhaidong@youhaidong-ThinkPad-Edge-E545:~$ df -l 文件系统 1K-blocks 已用 可用 已用% 挂载点 /dev/ ...
- Java代码输出是“father”还是“child”(二)
1.实例 /** * 以下代码输出的结果是 */ package com.you.model; /** * @author YouHaidong * 输出的结果 */ public class Fat ...
- ubuntu14.04 64位 安装eclipse出错
1 错误描述 org.eclipse.m2e.logback.configuration: The org.eclipse.m2e.logback.configuration bundle was a ...