zoukankan      html  css  js  c++  java
  • 动态修改document.title失效

    背景:如果页面title是异步获取的数据,那么拿到数据直接使用document.title会在ios低版本出现失效的问题,因为页面加载完成后title被确定,此后不再监听title的change事件

    解决方法:获取到数据后,动态创建iframe标签,src指向一个非常小的资源,监听load事件,加载完成立即删除即可更新title

    代码:

          document.title = this.title;
          let iframe = document.createElement('iframe');
          iframe.src = require('/favicon.ico');
          iframe.style.display = 'none';
          let fn = function () {
            setTimeout(function () {
              iframe.removeEventListener('load', fn);
              document.body.removeChild(iframe);
              console.log('title', document.title);
            }, 0);
          };
          iframe.addEventListener('load', fn);
          document.body.appendChild(iframe);
    

    原理: iframe是内联框架元素,可以将另一个html元素嵌入到当前页面,当异步获取到数据后,动态创建的iframe根据指定src发送请求,从而触发title的监听,加载完后移除不会对页面造成影响。

    针对ios:由于只是部分ios的微信浏览器有此现象,所以不需要对所有设备进行此操作,可进行判断

    iphone8P 微信 useragent: Mozilla/5.0 (iPhone; CPU iPhone OS 12_2 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Mobile/15E148 MicroMessenger/7.0.8(0x17000820) NetType/WIFI Language/zh_CN
    var ua = navigator.userAgent.toLowerCase();
    if(ua.match(/MicroMessenger/i)=="micromessenger" && !!ua.match(/(i[^;]+;( U;)? CPU.+Mac OS X/i)){
       ...iframe操作
    }
    

    该方案无法解决的问题:

    ios safari的地址栏显示域名,无法通过此方法修改title

    安卓部分野鸡浏览器(安卓低版本自带浏览器)显示的是完整url

  • 相关阅读:
    TODO: Android UI测试 UIAutomator
    Android-jacoco代码覆盖率:单元测试覆盖率+功能测试覆盖率
    Android --其他测试点
    Android 测试-Robolectric,mockito,esspresso
    Android adb的一些用法
    Android上执行python脚本-QPython
    【洛谷P1080】国王游戏
    【洛谷P2123】皇后游戏
    【洛谷P2340】 奶牛会展
    【洛谷P1982】小朋友的数字
  • 原文地址:https://www.cnblogs.com/lan-cheng/p/13362703.html
Copyright © 2011-2022 走看看