谷歌弹出窗口 js_PS系统谷歌86、IE弹出窗空白解决方案-CSDN博客

一. 前言

PS系统弹出窗口会一片空白，比如放大镜或者二级页面的弹出页面。这是chrome或者edge浏览器升级导致的。官方给出了一个解决方案，是直接修改通用样式表

/* Fix for Chrome Bug - 32015432 , Blank Pop Up issue */.PSSRCHPAGE{overflow-x: scroll;}

但是这样会导致不需要滚动条的页面也出现滚动条，这并不是我们所希望的。

二. 问题原因

弹出窗页面横向滚动条首次渲染出现异常

三. 方案思路

采用js控制滚动条样式，触发二次渲染即可，不需要强制显示滚动条

四. 方案明细

1.新建HTML对象BUGFIXED_BODY_BLANK_JS

/** * @description 修复谷歌86、IE弹出窗空白问题 * @author LeaFish <735683662@qq.com> * @date 2020-11-09 * @export */function bugfixedBodyBlank() {  var iframes = document.querySelectorAll(".PSMODAL iframe");  // 修改overflow，触发渲染  function setOverflow(iframe) {    iframe.contentDocument.body.style.overflowX = "scroll";    setTimeout(function () {      iframe.contentDocument.body.style.overflowX = "auto";    }, 10)  }  for (var i = 0; i < iframes.length; i++) {    try {      if (iframes[i].contentWindow.$bugfixedBodyBlank) continue;      iframes[i].contentWindow.$bugfixedBodyBlank = true;      // 初始执行      setOverflow(iframes[i]);      // 窗口大小变化时，再次执行      iframes[i].contentWindow.addEventListener("resize", setOverflow.bind(this, iframes[i]));    } catch (error) {      continue;    }  }}self == top && setInterval(bugfixedBodyBlank,100);

2.将BUGFIXED_BODY_BLANK_JS添加到【PeopleTools/门户网站/品牌化/品牌化系统选项】附加javascript对象中(推荐)，或者直接插入到框架通用js中

五. 备注

因为并不确定是否只有谷歌和IE，存在这个问题，所以并未进行浏览器判断。