需要的效果如下：
 原文链接 原文链接
 贴吧类型的主页面，希望点击下面的帖子就可以看到帖子详情页，然后点击帖子上的返回按钮可以返回到点前浏览的地方。
 
主页面如下：
 
 问题：帖子列表是ajax请求，一次性加载10条数据，采用超链接跳转详情页之后，再返回主页面，主页面的帖子列表需要重新请求，如果说用户已经看到第五页的帖子，点击详情，再次返回主页面时，帖子只会请求显示第一页数据，这样用户需要在再加载4次数据才能找到自己浏览的那个位置，用户体验太差了。
 
寻找解决方法用iframe。实现效果如下：点击帖子链接，页面出现菊花，表示在请求详情页的数据
 
 数据加载完后，菊花隐藏，显示帖子详情，效果如下
 

 点击详情页的返回按钮，主页面的所有数据均在，并且显示在用户刚浏览的那条数据的位置。
 
关键性代码如下：
 $("#detail iframe").load(function() {
 //加载完隐藏转动菊花的操作
 });
 
主要思路：
 其实代码并不难，关键是思路。 主页面的显示和隐藏，以及用到了锚点链接。
 
第一步，主页面和详情页功能已完成
 
第二步：分别将主页代码和iframe用section标签包裹起来
 
 第三步，给帖子列表添加点击事件
 
 ps，需要和自己定义的参数一样
 
 这样，点击帖子列表就会显示菊花，加载完后显示详情页
 第四步，返回主页操作
 
 这个用起来很简单，但是需要思路清晰，用jq来控制页面元素的显示和隐藏，如果问题没有得到解决，可以加我扣扣1913284695 ,当然还有其他的方法，比如get请求也可以实现

 
 

 
 
一般来说，我们判断 iframe 是否加载完成其实与 判断 JavaScript 文件是否加载完成 采用的方法很类似：
 

 var iframe 
 =
  document.createElement(
 "
 iframe
 "
 );
 iframe.src 
 =
  
 "
 http://www.planabc.net
 "
 ;
 
 if
  (!
 /*
 @cc_on!@
 */
 0
 ) { 
 //
 if
  
 not
  IE    
     iframe.onload 
 =
  
 function
 (){        
         alert(
 "
 Local iframe is now loaded.
 "
 );    
     };
 } 
 else
  {    
     iframe.onreadystatechange 
 =
  
 function
 (){//ie
         
 if
  (iframe.readyState 
 ==
  
 "
 complete
 "
 ){            
             alert(
 "
 Local iframe is now loaded.
 "
 );
         }
     };
 }
 document.body.appendChild(iframe);
 

 
最近， 
Nicholas C. Zakas
 文章
《Iframes, onload, and document.domain》
的评论中 Christopher 提供了一个新的判断方法（
很完美
) 

 var iframe 
 =
  document.createElement(
 "
 iframe
 "
 );
 iframe.src 
 =
  
 "
 http://www.planabc.net
 "
 ;
 
 if
  (iframe.attachEvent){    
     iframe.attachEvent(
 "
 onload
 "
 , 
 function
 (){        
         alert(
 "
 Local iframe is now loaded.
 "
 );    
     });
 } 
 else
  {    
     iframe.onload 
 =
  
 function
 (){        
         alert(
 "
 Local iframe is now loaded.
 "
 );    
     };
 }
 document.body.appendChild(iframe);
 

 
我自己的实例:

 

 
 <
 div class
 =
 "
 contentRight
 "
 >
 
                     
 <
 iframe name
 =
 "
 myframe
 "
  id
 =
 "
 myframe
 "
  src
 =
 ""
  frameborder
 =
 "
 0
 "
  scrolling
 =
 "
 no
 "
  width
 =
 "
 100%
 "
  height
 =
 "
 500
 "
 ></
 iframe
 >
 
                 
 </
 div
 >
  
 

 

 var
  iframe 
 =
  document.getElementById(
 "
 myframe
 "
 );
     iframe.src
 =
 "
 <%=request.getContextPath()%>/jsp/dwgl/hygl/zdhygl/dwgl_hygl_zdhygl_cx_part2.jsp
 "
 ;
     
 if
  (iframe.attachEvent){
         iframe.attachEvent(
 "
 onload
 "
 , 
 function
 (){
             get_list_data_nopar();
          });
     }
 else
 {
         iframe.onload 
 =
  
 function
 (){
             get_list_data_nopar();
         };
     }
 

 

 
几点补充说明： 
 
1、IE 支持 iframe 的onload 事件，不过是隐形的，需要通过 attachEvent 来注册。 

 
2、第二种方法比第一种方法更完美，因为 readystatechange 事件相对于 load 事件有一些潜在的问题。 

html
 
<main>
  <img v-show="!completeLoad" src="../images/loading.gif"/>
  <iframe v-show="completeLoad" :src="url" width="100%" id="license_iframe" height="100%"></iframe>
</main>
 
js
 
mounted () {
	var _this = this
	const iframe = document.querySelector('#license_iframe')
	// 处理兼容行问题
	if (iframe.attachEvent) {
		iframe.attachEvent('onload', function () {
			console.log('iframe已加载完毕')
			_this.completeLoad = true;
        })
    } else {
        iframe.onload = function () {
            console.log('iframe已加载完毕')
            _this.completeLoad = true;
        }
    }
}

 
方法一、jQuery load()
 
 
 
  
var frm = document.getElementById('myiframe');  
$(frm).load(function(){                             //  等iframe加载完毕  
dosomething();  
});  
 
 
 
 
方法二、onreadystatechange
 
 
 
  
var iframe = document.createElement("myiframe");  
iframe.src = "http://www.baidu.com";  
if (!/*@cc_on!@*/0) { //如果不是IE，IE的条件注释  
    iframe.onload = function(){     
        alert("Local iframe is now loaded.");  
    };  
} else {  
    iframe.onreadystatechange = function(){ // IE下的节点都有onreadystatechange这个事件  
        if (iframe.readyState == "complete"){  
            alert("Local iframe is now loaded.");  
        }  
    };  
}  
document.body.appendChild(iframe); 
 
 
 
 
方法三、attachEvent
 
 
 
  
var iframe = document.createElement("iframe");  
iframe.src = "http://www.baidu.com";  
  
if (iframe.attachEvent){  
    iframe.attachEvent("onload", function(){ // IE  
        alert("Local iframe is now loaded.");  
    });  
} else {  
    iframe.onload = function(){ // 非IE  
        alert("Local iframe is now loaded.");  
    };  
}  
  
document.body.appendChild(iframe);  
 
 
 
 
 
 
转载于:https://www.cnblogs.com/Tohold/p/10690180.html