项目中打开新窗口的3种方式-优快云博客

本文探讨了三种网页间交互的方法：使用iframe调整高度、利用window.open进行窗口间通信及回调处理，以及监听新窗口关闭的策略。文章深入分析了每种方法的特点，如iframe的高度限制、window.open的跨域问题等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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();
},