項(xiàng)目中打開(kāi)新窗口的3種方式

yacheng 發(fā)布于2019-08-23 15:20 / 396人閱讀

摘要：使用在當(dāng)前窗口打開(kāi)另一個(gè)窗口，在新開(kāi)窗口中操作完成之后，關(guān)閉該窗口，在當(dāng)前窗口中監(jiān)聽(tīng)新窗口什么時(shí)候關(guān)閉，一旦檢測(cè)到窗口關(guān)閉就執(zhí)行回調(diào)。使用這種方式需要考慮瀏覽器的跨域問(wèn)題，在上如果使用打開(kāi)跨域了的窗口，是獲取不到對(duì)象的。

1.使用iframe(注意Iframe的高度默認(rèn)150px，如果要改變iframe的高度，只能設(shè)置成具體的像素值，不能是百分比)

2.使用window.open()直接打開(kāi)外部窗口，在外部窗口中處理完成所有的操作后回到原來(lái)的頁(yè)面，原來(lái)的頁(yè)面出現(xiàn)一個(gè)確認(rèn)是否完成操作的彈框。點(diǎn)擊確認(rèn)或者“cancel”之后接著調(diào)用其他的接口。

3.使用window.open()在當(dāng)前窗口打開(kāi)另一個(gè)窗口，在新開(kāi)窗口中操作完成之后，關(guān)閉該窗口，在當(dāng)前窗口中監(jiān)聽(tīng)新窗口什么時(shí)候關(guān)閉，一旦檢測(cè)到窗口關(guān)閉就執(zhí)行回調(diào)。
使用這種方式需要考慮瀏覽器的跨域問(wèn)題，在ie上如果使用window.open()打開(kāi)跨域了的窗口，window.open()是獲取不到window對(duì)象的。

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

GPU云服務(wù)器云服務(wù)器新窗口打開(kāi) 打開(kāi)新窗口 ajax打開(kāi)新窗口 js跳轉(zhuǎn)新窗口打開(kāi)

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/101897.html

相關(guān)文章

瀏覽器攔截打開(kāi)新窗口情況總結(jié)

摘要：在打開(kāi)一個(gè)新窗口時(shí)，由于瀏覽器的安全機(jī)制，用戶未始終允許的情況下，可能會(huì)觸發(fā)到瀏覽器攔截，無(wú)法正常直接彈出。只分析使用代碼手動(dòng)打開(kāi)新窗口的方式。所有瀏覽器都不允許非用戶操作引起的打開(kāi)新窗口。在打開(kāi)一個(gè)新窗口時(shí)，由于瀏覽器的安全機(jī)制，用戶未始終允許的情況下，可能會(huì)觸發(fā)到瀏覽器攔截，無(wú)法正常直接彈出。網(wǎng)上有很多給出解決方案的只言片語(yǔ)，不夠全面，所以針對(duì)自己遇到的問(wèn)題做了詳細(xì)的情況分析。...

Steven 2019-08-23 12:43 評(píng)論0 收藏0
使用<a>標(biāo)簽時(shí)，你可能會(huì)忽略的一個(gè)安全問(wèn)題

摘要：當(dāng)一個(gè)外部鏈接使用了的方式，這個(gè)外部鏈接會(huì)打開(kāi)一個(gè)新的瀏覽器。此時(shí)，新頁(yè)面會(huì)打開(kāi)，并且和原始頁(yè)面占用同一個(gè)進(jìn)程。筆者的總結(jié)這是一篇很短的文章，主要介紹了在使用標(biāo)簽打開(kāi)一個(gè)新窗口過(guò)程中的安全問(wèn)題。本文首發(fā)于公眾號(hào): 符合預(yù)期的CoyPan本文章翻譯于：https://medium.com/front-end-weekly/prevent-sending-http-referer-hea...

rozbo 2019-08-02 14:05 評(píng)論0 收藏0
使用<a>標(biāo)簽時(shí)，你可能會(huì)忽略的一個(gè)安全問(wèn)題

摘要：當(dāng)一個(gè)外部鏈接使用了的方式，這個(gè)外部鏈接會(huì)打開(kāi)一個(gè)新的瀏覽器。此時(shí)，新頁(yè)面會(huì)打開(kāi)，并且和原始頁(yè)面占用同一個(gè)進(jìn)程。筆者的總結(jié)這是一篇很短的文章，主要介紹了在使用標(biāo)簽打開(kāi)一個(gè)新窗口過(guò)程中的安全問(wèn)題。本文首發(fā)于公眾號(hào): 符合預(yù)期的CoyPan本文章翻譯于：https://medium.com/front-end-weekly/prevent-sending-http-referer-hea...

zero 2019-06-21 16:52 評(píng)論0 收藏0
使用<a>標(biāo)簽時(shí)，你可能會(huì)忽略的一個(gè)安全問(wèn)題

摘要：當(dāng)一個(gè)外部鏈接使用了的方式，這個(gè)外部鏈接會(huì)打開(kāi)一個(gè)新的瀏覽器。此時(shí)，新頁(yè)面會(huì)打開(kāi)，并且和原始頁(yè)面占用同一個(gè)進(jìn)程。筆者的總結(jié)這是一篇很短的文章，主要介紹了在使用標(biāo)簽打開(kāi)一個(gè)新窗口過(guò)程中的安全問(wèn)題。本文首發(fā)于公眾號(hào): 符合預(yù)期的CoyPan本文章翻譯于：https://medium.com/front-end-weekly/prevent-sending-http-referer-hea...

stackvoid 2019-08-23 14:38 評(píng)論0 收藏0
理解HTTP session原理及應(yīng)用

摘要：理解原理及應(yīng)用一術(shù)語(yǔ)在我的經(jīng)驗(yàn)里，這個(gè)詞被濫用的程度大概僅次于，更加有趣的是與在某些語(yǔ)境下的含義是相同的。其中的作用就是為了解決協(xié)議無(wú)狀態(tài)的缺陷所作出的努力。理解HTTP session原理及應(yīng)用一、術(shù)語(yǔ)session 在我的經(jīng)驗(yàn)里，session這個(gè)詞被濫用的程度大概僅次于transaction，更加有趣的是transaction與session在某些語(yǔ)境下的含義是相同的。 ...

dreamGong 2019-08-14 12:11 評(píng)論0 收藏0