IOS React等Title不显示问题解决办法

IOS React等Title不显示问题解决办法

单页应用里整个页面只会在第一次完全刷新，后面只会局部刷新（一般不包括head及里面的title），所以无法在服务器端控制title，只能在页面刷新的时候通过js修改title。常规做法如下，可惜在iOS微信浏览器无效。

问题原因：

因为微信浏览器首次加载页面初始化title后，就再也不监听 document.title的change事件。

解决方案：

修改title之后，给页面加上一个内容为空的iframe，随后立即删除这个iframe，这时候会刷新title。但是如果简单的这样设置，一般是会有闪动的，所以可以设置

iframe.style.cssText = 'display: none; width: 0; height: 0;';

完整的代码：

document.title = '设置标题HTTP';
    const iframe = document.createElement('iframe');
    iframe.style.cssText = 'display: none; width: 0; height: 0;';
    iframe.src = 'http://desk.fd.zol-img.com.cn/t_s960x600c5/g5/M00/05/0F/ChMkJ1erCriIJ_opAAY8rSwt72wAAUU6gMmHKwABjzF444.jpg';
    //iframe.src = require('./img/text_delete.png'); 

    const listener = () => {
      setTimeout(() => {
        iframe.removeEventListener('load', listener);
        setTimeout(() => {
          document.body.removeChild(iframe);
        }, 0);
      }, 0);
    };
    iframe.addEventListener('load', listener);
    document.body.appendChild(iframe);

感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

赞 (0)

相关推荐

  • React-Native Android 与 IOS App使用一份代码实现方法

    React-Native Android 与 IOS App使用一份代码实现方法

    React-Native  Android 与 IOS 共用代码 React-Native 开发的App, 所有组件iOS & Android 共用, 共享一份代码 包括一些自定义的组件, 如NavigationBar, TabBar, SegmentedControl, 使用字体图标, 具有一定的参考意义 主要专注于布局, 共享组件/代码, 以及一些React自带的组件, 如: ScrollView, TouchableOpacity, View, Text, ListView, Image,

  • IOS React Native FlexBox详解及实例

    IOS React Native FlexBox详解及实例

    IOS React Native FlexBox详解及资料整理, # 前言 学习本系列内容需要具备一定 HTML 开发基础,没有基础的朋友可以先转至 HTML 学习 本人接触 React Native 时间并不是特别长,所以对其中的内容和性质了解可能会有所偏差,在学习中如果有错会及时修改内容,也欢迎万能的朋友们批评指出,谢谢 文章第一版出自简书,如果出现图片或页面显示问题,烦请转至 简书 查看 也希望喜欢的朋友可以点赞,谢谢 什么是 FlexBox 布局 在 html 中,界面的搭建都是采用 C

  • React Native搭建iOS开发环境

    React Native搭建iOS开发环境

    一.写在前面 1. 什么是React-Native? React-Native是:Facebook 在2015年初React.js技术研讨大会上公布的一个开源项目.支持用开源的JavaScript库React.js来开发iOS和Android原生App.初期仅支持iOS平台,同年9月份,该开源项目同时支持Android平台. React Native的原理是:在JavaScript中用React抽象操作系统原生的UI组件,代替DOM元素来渲染,比如以<View>取代<div>,以&

  • IOS React等Title不显示问题解决办法

    IOS React等Title不显示问题解决办法 单页应用里整个页面只会在第一次完全刷新,后面只会局部刷新(一般不包括head及里面的title),所以无法在服务器端控制title,只能在页面刷新的时候通过js修改title.常规做法如下,可惜在iOS微信浏览器无效. 问题原因: 因为微信浏览器首次加载页面初始化title后,就再也不监听 document.title的change事件. 解决方案: 修改title之后,给页面加上一个内容为空的iframe,随后立即删除这个iframe,这时候会

  • EasyUi 打开对话框后控件赋值及赋值后不显示的问题解决办法

    1:首先赋值要在页面加载后才能赋值,也就是在onLoad中: 2:是因为dialog里的输入域用了textbox控件,如果需要赋值,那么要调用textbox的赋值方法,而不是$('#userName').val(row[0].User_name); 因为easyui的textbox控件,初始化之后,会将原输入域隐藏起来,而控件实际展示的,是easyui所生成的输入域.可以使用浏览器查看控件初始化之后的dom结构就知道了. 所以将赋值语句修改为$('#dilog_id').textbox("set

  • IOS 下获取 rootviewcontroller 的版本不同的问题解决办法

    IOS 下获取 rootviewcontroller 的版本不同的问题解决办法 一般 原生的 [[UIApplication sharedApplication].keyWindow.rootViewController presentModalViewController:self animated:NO]; 可以 获取  系统的  rootviewcontroller 但 cocos2d-x 2.1.1 在 appcontroller.mm 内定义的 加载方法是 // Set RootVie

  • IOS 键盘挡住输入框的问题解决办法

    IOS 键盘挡住输入框的问题解决办法 在iOS开发发现一个问题,有时输入框位于低出时,当编辑输入时,弹出的键盘会挡住输入框,令用户看不清楚实时的输入情况,使界面交互极度不友好. 经过查资料终于解决了这个问题. 解决思路: 1. 输入框监听UIControlEventEditingDidBegin事件,当用户开始输入时,将整个view上移. 2. 输入框监听UIControlEventEditingDidEnd事件,当用户结束输入时,将整个view下移,恢复到原位置. 输入框监听事件: [text

  • Android 中TextView的使用imageview被压缩问题解决办法

    Android 中TextView的使用imageview被压缩问题解决办法

    Android 中TextView的使用imageview被压缩问题解决办法 看下运行效果图: 今天解bug的时候遇到一个奇怪的问题:listview的item由一个textview和一个imageview组成,父布局是线性水平排列.我的本意是imageview显示相同的图片,textview显示文本,但是运行程序后发现,当某个textview的文本较多时,imageview会被压缩,刚开始没注意,检查代码了好久. 代码示例如下: <!--文本少的item--> <LinearLayou

  • vue获取input输入值的问题解决办法

    vue获取input输入值的问题解决办法 v-for里有多行input输入框,vue怎么获取某行的输入的值,随便写了点代码,意思就是后台返回了多行的list集合,页面显示多行输入框,当修改某行的值时进行校验,输入错误友好提示下,后边加个清空按钮,点击清空当前行数据,最开始的想法是,用v-bind:value绑定值,这样就出现一种情况,页面输入的值无法获取到,v-bind不会修改原始list里的值,而且ref也不能动态绑定,ref只能全部获取,this.$refs.itemPriceRef[],这

  • nginx配置引发的403问题解决办法

    nginx配置引发的403问题解决办法

    nginx配置引发的403问题解决办法 一.问题:在curl nginx配置的本地域名时出现403 nginx_error.log日志如下: 二.疑问 1.www.requesturi.com配置如下:发现root目录与error日志中的禁止访问的文件不一致,理论上访问www.requesturi.com应该到/usr/local/nginx/html1去查找,为何显示的确是/usr/local/nginx/html禁止访问? 2.curl一下/usr/local/nginx/html1下的一个

  • 在iOS10系统中微信后退无法发起ajax请求的问题解决办法

    在IOS10的系统中,在微信客户端中打开网页中的后退按钮,url后退为之前浏览网页的url,但是有时候网页会显示空白,后经过一步步调试,发现是发送ajax请求出现了问题,ajax返回的status的值为0. status的值为0的情况 1.If the state is UNSENT or OPENED, return 0.(如果状态是UNSENT或者OPENED,返回0) 2.If the error flag is set, return 0.(如果错误标签被设置,返回0) 3.Return

  • Kotlin基本类型自动装箱出现问题解决办法

    Kotlin基本类型自动装箱出现问题解决办法 问题 在Kotlin官方文档介绍基本类型时,给我们说明了在有些情况下会对基本类型自动进行装箱操作. 但是具体是如何进行装箱,以及何时进行装箱缺没有提供详细介绍.只是提供了一个例子,如下: val a: Int = 10000 print(a === a) // Prints 'true' val boxedA: Int? = a val anotherBoxedA: Int? = a print(boxedA === anotherBoxedA) /

随机推荐