• 问题描述
• 使用 window.open() 打开新窗口出现的问题及解决
• base64图片显示不出来原因
• 各个浏览器对url长度限制如下
• 不同编码方式 - 字符与字节对应关系不同

• 业务需求：当前窗口跳转到新窗口，跳转时要携带 base64格式数据，打开新窗口后显示携带的base64格式数据图片。
• 问题：打开新窗口后携带的base64格式图片显示不出来

使用 window.open() 打开新窗口出现的问题及解决

• 【常规携带参数 - 有问题】
  • 打开新窗口直接用 window.open() ， 地址拼接 传参

    // 打开新窗口（res.data 为base64格式字符串）
    window.open('/#/print-preview-web?src=' + res.data)
    

  • 新窗口展示base64格式图片（图片显示不出来）

    <!-- 在新窗口中显示图片 -->
    <img :src="'data:image/jpeg;base64,' + printPreviewPic" alt="" />
    

    this.printPreviewPic = this.$route.query.src // 从url地址中取出携带的base64格式图片字符串
    

• 【 window['filter'] - 解决传参过长问题】
  • 打开新窗口使用 window.open() 借助 window['filter'] 传参

    // 打开新窗口携带的数据【主要代码】
    window['filter'] = {
    src: res.data  // res.data 为base64格式字符串
    // 打开打印预览窗口
    // window.open('/#/print-preview-web?src=' + res.data) // 【直接拼接会有问题】
    window.open('/#/print-preview-web')
    

  • 打开 新窗口 显示base64格式图片

    <!-- 在新窗口中显示图片 -->
    <img :src="'data:image/jpeg;base64,' + printPreviewPic" alt="" />
    

    // this.printPreviewPic = this.$route.query.src
    // this.printPreviewPic = this.$route.query.src.replace(/\s/g, encodeURIComponent(' ')) // 可能是空格影响的？转义一下（没有什么用）
    this.printPreviewPic = window.opener['filter'].src // 【主要代码】
    base64图片显示不出来原因
     
    浏览器对 url 地址长度有限制，base64格式图片字符串太太太长了，有影响 
      
    随便找了一个图片转为base64格式之后长度有 178379 字符，而浏览器地址栏传参长度有限制（同一字符串不同编码方式编码出的大小不一样，而且每个浏览器限制长度也不一样，之后再列举）
     
     
    各个浏览器对url长度限制如下
     
    IE浏览器对URL的长度现限制为2048字节(自己测试最多为2047字节)。
    360极速浏览器对URL的长度限制为2118字节。
    Firefox(Browser)对URL的长度限制为65536字节。
    Safari(Browser)对URL的长度限制为80000字节。
    Opera(Browser)对URL的长度限制为190000字节。
    Google(chrome)对URL的长度限制为8182字节。
    URL最大长度问题 - 网上英文资料
     （来源 博客）
     
    不同编码方式 - 字符与字节对应关系不同
     
    常见的编码字符与字节的对应关系如下：
     
    ASCII码中，一个英文字母（不分大小写）占一个字节的空间，一个中文汉字占两个字节的空间。一个二进制数字序列，在计算机中作为一个数字单元，一般为8位二进制数，换算为十进制。最小值0，最大值255。
    UTF-8编码中，一个英文字符等于一个字节，一个中文（含繁体）等于三个字节。
    Unicode编码中，一个英文等于两个字节，一个中文（含繁体）等于两个字节。
     符号：英文标点占一个字节，中文标点占两个字节。举例：英文句号“.”占1个字节的大小，中文句号“。”占2个字节的大小。
    GBK编码方式是中文占两个字节，英文占1个字节。
     （来源 baidu）
    static：默认值，没有定位，元素出现在正常的文档流中
    relative：生成相对定位的元素，不脱离文档流，相对于自身位置进行定位
    absolute：生成绝对定位的元素，脱离文档流，相对于最近一级的定位，而不是static的父元素来进行定位
    fixed：生成绝对定位元素（老IE不支持），脱离文档流，相对于浏览器窗口进行定位
    2、请描述一下网页从开始请求到最终显示的完整过程
    1.1在浏览器中输入地址
    1.2发送到DNS服务器，解析获取域名对应的web服务器
    function openPostWindow(url) {
    	var newWin = window.open(),
    	var formStr = '<form style=";" method="POST" action="' + url + '">' +
    		'</form>';
    	newWin.document.body.innerHTML = fo
          var newWin = window.open(),
          formStr = '';
          //设置样式为隐藏，打开新标签再跳转页面前，如果有可现实的表单选项，用户会看到表单内容数据
           form...
    3）可能有中文编码问题
    所以需要用post方式 ,下面说的就是一种window.open发送post请求的方法。
    网页的post一般是通过form表单的方式来实现的，所以现在来模拟form表单的方式来实现window.open效果。
      var winHeight = window.document.documentElement.clien
    				
    window.open 方式请求下载接口的时候，链接太长怎么办？
    解决方案：post from 表单方式提交
    this.post('/api/HCReportxx/exportHcReportxx',{"year":'2019',"data": JSON.stringify(param)});
    post =(url, params) =>{ 
            // 创建form元素
            var temp_form = document.createElement("form");
    const targetWindow = window.open("子页面地址", "_black");
    window.addEventListener("message", e => {
      if (e.origin == "子页面地址") {
        console.log(e.data, "子页面发送来的数据");
        targetWindow.postMes
    BFC 块级格式化上下文 一块独立的区域，有自己的规则，bfc中的元素与外界的元素互不影响
    BFC是一块用来独立的布局环境，保护其中内部元素不受外部影响，也不影响外部。
    怎么触发BFC
    1. float的值left或right
    2. overflow的值不为visible（默认）
    3. display的值为inline-block、table-cell、table-caption
    4. position的值为absolute（绝对定位）或f
    ★★ 解释下 let 和 const 的块级作用域
    ★★★★ 说说你对执行上下文的理解
    ★★★ 对闭包的看法，为什么要用闭包？说一下闭包的原理以及应用场景？闭包的 this 指向问题？
    ★★★ 简述闭包的问题以及优化
    ★★★ 如何确定 this 指向？改变 this 指向的方式有哪些？
    ★★★ 介绍箭头函数的 this
    				
    今天解决了一个window.open 提交表单和参数过长截取的问题。
    window.open 是采用get方式促发，所以需要提交表单的话要提交form具体如下代码，即可实现form提交
    大家注意看我标红的地方
    [code="java"]function showPhoto(name){  
        window.open("about:blank", "newWin",700,...
    				
    在Vue.js中，如果你想通过`window.open()`函数在用户点击某个操作时打开一个新的浏览器窗口，并在该窗口中打印一些内容，你可以这样做：
    首先，在你的组件模板里，添加一个按钮或者链接，设置一个事件处理器（通常是`@click`事件），例如：
    ```html
    <button @click="openNewWindow">打开新窗口</button>
    接下来，在对应的`methods`对象中编写`openNewWindow`方法：
    ```javascript
    export default {
      methods: {
        openNewWindow() {
          // 使用window.open()创建新窗口
          const newWindow = window.open('', '_blank'); // 第二个参数为空或'_blank'表示新窗口
          // 创建一个Promise处理异步操作（如果需要）
          Promise.resolve().then(() => {
            // 在新窗口中执行你的打印操作，比如使用JavaScript的console.log
            if (newWindow) { // 确保新窗口已经打开
              newWindow.document.write('<script>window.print();</script>');
              // 或者直接打印，但这种方式受浏览器限制
              // newWindow.postMessage('打印信息', '*');
    在这个例子中，我们创建了一个新的空白窗口，并尝试执行`window.print()`，但这通常会被浏览器的安全策略阻止，因为这可能会触发用户的隐私设置。`postMessage`方法可以在某些场景下发送消息给其他窗口，但不是所有浏览器都支持。
    				卸载过 IE浏览器，再安装提示“安装程序无法继续，因为你的计算机上安装了新的 Internet Explorer” ，cv 别人的IE浏览器安装文件夹打开 iexplore.exe 窗口闪一下又关掉了
                    小程序 - Taro小程序中打开h5页面链接 - 并解决：无法打开该页面 - 不支持打开 https://www.baidu.com/，请在“小程序右上角更多-＞反馈与投诉”中和开发者反馈
                        myAdmin1: 
                        你好大佬，宝塔面板的域名根目录在哪呢
                    input 类型为 number 时如何去掉数字加减上下箭头
                        Fatdays: 
                        若依解决不了
                    前端实现转盘抽奖 - 使用 lucky-canvas 插件
                        Csgogo1998: 
                        就是指定转到什么角度
                    前端实现转盘抽奖 - 使用 lucky-canvas 插件
                        Csgogo1998: 
                        可以指定设置最后抽奖抽到什么东西吗？