项目中打开新窗口的3种方式

字节揽雪客
• 阅读 1733

1.使用iframe(注意Iframe的高度默认150px,如果要改变iframe的高度,只能设置成具体的像素值,不能是百分比)

2.使用window.open()直接打开外部窗口,在外部窗口中处理完成所有的操作后回到原来的页面,原来的页面出现一个确认是否完成操作的弹框。点击确认或者“cancel”之后接着调用其他的接口。

3.使用window.open()在当前窗口打开另一个窗口,在新开窗口中操作完成之后,关闭该窗口,在当前窗口中监听新窗口什么时候关闭,一旦检测到窗口关闭就执行回调。
使用这种方式需要考虑浏览器的跨域问题,在ie上如果使用window.open()打开跨域了的窗口,window.open()是获取不到window对象的。

detectCreditCardFilledOut: (callback, url, openWin) => {
  let creditCarWin = null;

  let s = null;

  const stopF = () => {
    clearInterval(s);
    creditCarWin = null;
    s = null;
    callback();
  };


  const checkCloseWindowOrNot= () => {
    if (creditCarWin != null && creditCarWin.closed) {
      stopF();
    }
  };


  const openCreditCard = () => {
    try {
      creditCarWin = openWin(url, 'CreditCard');
      creditCarWin.focus();
      runF();
    } catch (e) {
      Util.NotificationUtil('error', {
        description: lang.openWindowError
      })
    }
  };

  const runF = () => {
    s = setInterval(checkCloseWindowOrNot, 500);
  };

  openCreditCard();
},
点赞
收藏
评论区
推荐文章
晴空闲云 晴空闲云
3年前
javascript实践教程-02-javascript入门
本节目标1.掌握如何编写javascript代码。2.掌握javascript的3个弹框。3.掌握javascript的注释。4.掌握浏览器的调试工具控制台。内容摘要本篇介绍了如何在网页上编写js代码,如何引入外部js代码文件,js的3个弹框、注释语法,还有浏览器调试工具的控制台使用。阅读时间1520分钟。script标签如果我们需要在网页中编写
移动路由器的设置方法教程
正确连接路由器后,打开路由器的设置页面,根据页面中的提示操作,就可以完成上网设置,下面介绍详细的设置步骤。如果你的移动路由器(https://www.ruijie.com.cn/cp/lyydly/)已经设置或者使用过了,请先把它恢复出厂设置,
Stella981 Stella981
3年前
IE iframe cookie问题(p3p)
前段时间碰到一个问题,就是在IE下,使用iFrame嵌入页面时,该页面的会话级别的cookie无法写入,导致服务端始终无法获取JSESSIONID,每次都是产生一个新的,使得Session无法使用。只需要设置P3PHTTPHeader,在隐含iframe里面跨域设置cookie就可以成功。ASP直接在头部加了头部申明,测试有效。
Stella981 Stella981
3年前
JS中popup.js
//popupclass显示弹出窗口,。/\以下为使用popup对象,传入相应的配置参数,弹出不同类型的窗口        functionShowIframe()//显示iframe        {            varpopnewPopup({contentType:1,isReloadOnClo
Stella981 Stella981
3年前
IE下 iframe子页面document.documentElement报错问题(未指明的错误。)
测试环境:IE8 jquery1.11.1问题描述:如果使用了<iframe,并且在iframe页面中用到了jquery,那么在加载iframe页面时会报错.(未指明的错误)经过排查,错误来自红色部分"focus":function(elem){  returnelem document.activeE
Stella981 Stella981
3年前
Angular2+ iframe跨域调用父页面js
业务场景:列表页面添加一个导入功能,该导入功能由第三方页面提供,导入完成后需要通知主列表刷新数据。先来看看iframe跨域调用父页面的实现逻辑(以postMessage方式为例)_(postMessage介绍:https://developer.mozilla.org/zhCN/docs/Web/API/Window/pos
Wesley13 Wesley13
3年前
JS和CSS加载(渲染)机制不同
一、结论CSS可以在页面加载完成后随时渲染。举个例子:通过js给某个元素加一个id或者css,只要这个id或者css有对应的样式,此元素的样式就会自动生效。JS不可以在页面加载完成后生效。最明显的例子就是使用EasyUI的时候,iframe中哪些样式无效(EasyUi是依靠JS进行样式处理的,所以无法运行JS,那么样式也就无法设置。简单点说
可莉 可莉
3年前
10个实用的jquery小技巧
帮助提高你jQuery应用的简单小技巧。1.回到顶部按钮2.图片预加载3.判断图片是否加载完4.自动修补破损图像5.Hover切换class类6.禁用输入7.停止正在加载的链接8.togglefade/slide9.简单的手风琴10.使两个DIV同等高度11.在浏览器标签/新窗口打开外部链
Iframe在Vue中的状态保持技术 | 京东云技术团队
Iframe是一个历史悠久的HTML元素,根据MDNWEBDOCS官方介绍,Iframe定义为HTML内联框架元素,表示嵌套的BrowsingContext,它能够将另一个HTML页面嵌入到当前页面中。Iframe可以廉价实现跨应用级的页面共享,并且具有使用简单、高兼容性、内容隔离等优点,因此以Iframe为核心形成了前端平台架构领域第1代技术。
taskbuilder taskbuilder
6个月前
TaskBuilder前端页面JS脚本编辑
在前端页面设计器内,点击底部的“JS脚本”选项卡,可以打开JS脚本编辑器,查看和设置当前页面的JavaScript脚本有关的内容,包括以下几个部分:3.3.5.1外部脚本引用如果在前端页面里需要用到外部js文件的功能,则可以点击JS脚本设计器左上角“外部脚
taskbuilder taskbuilder
6个月前
TaskBuilder前端页面CSS样式规则设置
在前端页面设计器内,点击底部的“CSS样式”选项卡,可以打开CSS样式设计器,在此查看和设计当前页面的CSS样式规则,如下图所示:3.3.6.1引入外部样式文件如果要在页面中引入外部CSS文件,可以点击CSS样式设计器左上角“外部样式文件”栏右边的加号按钮