总结iframe onload事件无法监听的问题

目的：做一个web页面，希望能够在ios平台上动态更改title，项目中要求从服务器获取数据，然后动态更改html的title。

原因：一般更换title，通过方法 document.title = “title”就可以了，但是ios规定在页面完成后就不在监听更改title的事件了，所以不能用这个方法来更改title。

从网上找了些方法：基本思路是动态创建iframe，ios就可以进行刷新，更换title，然后 加载完成后删除iframe；

1、利用jquery做的

在服务器回调中进行，在最外层加上setTimeout()；这个方法我试了，如果在html页面中进行，是可以正常工作，但如果在一般的js文件里就不行，原因不清楚，可能原因是ifame create的时候浏览器就默认加载完成了，所以不触发onload事件。

setTimeout(function(){
var $body = $('body');

  document.title = 'the title you want to set';
  var $iframe = $("<iframe style='display:none;' src='./icon.png'></iframe>");
  $iframe.on('load',function() {
 
    setTimeout(function() {
      $iframe.off('load').remove();
    }, 0);
  }).appendTo($body);
}, 0);

2、js版本的

效果跟jquery差不多

  setTimeout(function(){
    //利用iframe的onload事件刷新页面
       
        document.title = title;
        var iframe = document.createElement('iframe');
        iframe.style.visibility = 'hidden';
        iframe.style.display="none";
        iframe.style.width = '0px';
        iframe.style.height = '0px';
        iframe.src = "https://res.wx.qq.com/";
        iframe.onload = function () {
           
            setTimeout(function () {
                document.body.removeChild(iframe);
            }, 0);
        };
        document.body.appendChild(iframe);
    },0);

3、生成div，然后在div的innerHtml中动态生成iframe

这个方法在ios环境可以正常运行，比上两种方法更好用

var div = document.createElement("div");
  div.innerHTML = "<iframe style=\"display:none; width:0px;height:0px;\" οnlοad=\"javascript:alert('loaded -includeFrame');\" src=\"https://res.wx.qq.com/\"></iframe>";
  document.body.appendChild(div);