Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

Android WebView后退时IFRAME变空白

  一直都没有在移动端用IFRAME这么奇葩的东西(就连PC版的程序都很少用IFRAME了),今天看到某QQ群里有人问了就去测试了下。这个是低版本Android WebView的BUG,具体原因不明,可以通过在popstate事件中对IFRAME强制重渲染的方法来解决。
  下面是问题重现。我的测试中只有在IFRAME请求本地资源时才会出现这个问题。由于不想写多文件的测试,这里直接插了句服务器语言来偷懒。
<?$s=$_SERVER['QUERY_STRING'] and die(urldecode($s));?>
<meta name="viewport" content="width=device-width" />
<iframe src="?Hello+World"></iframe>
<hr/>
<a href="//baidu.com">baidu</a>
  测试中在IFRAME之后放了个超链接,当点击链接后再按后退,IFRAME的内容部分就会变成白色。如果此时用JS去访问IFRAME可以得到其DOM,也就是说IFRAME只是没被渲染,其它一切正常。
  解决这个问题就是要在后退时让IFRAME重新渲染。判断是否是后退访问可以通过popstate事件,这很容易解决。而强制渲染就需要修改其与显示有关的属性,下面是我的解决办法,在页面全局代码中加入这段即可解决:
(function(){
  var z=0,s=document.getElementsByTagName("iframe");
  addEventListener("popstate",function(){
    for(var i=0;i<s.length;i++)
      s[i].style.webkitTransform="translateZ("+(z++)+")";
  });
})();
  这里修改了一个无关紧要而又与显示有关的属性“webkitTransform:translateZ”来使它强制重渲染。当然还可以用其它属性,只要能解决,用什么都行。
网名:
54.144.24.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^