jquery利用frame计算第三方网页加载时间

最新推荐文章于 2020-12-21 02:15:04 发布

逸世尘角

最新推荐文章于 2020-12-21 02:15:04 发布

阅读量1.1k

点赞数

分类专栏： JavaScript 文章标签： ajax jquery js 网页加载时间

本文链接：https://blog.csdn.net/yz1988computer/article/details/50135669

版权

JavaScript 专栏收录该内容

18 篇文章

订阅专栏

本文介绍了如何通过jQuery和frame解决跨域访问问题，以计算第三方网页的加载时间。源码中展示了具体实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

原先想采用div+ajax实现，但是各种问题，最无法解决的是跨域访问的问题，所以只能借助frame实现了，源码如下：

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>计算页面加载时间</title>
</head>
<body>
	<div style="margin:10px">
    	<input type="text" id="in-url" style="width:450px;height:30px" value="https://www.baidu.com" >
        <button id="go">Go!</button>
    </div>
    <div style="margin:10px">
    	<label id="lbStatus"></label>
    </div>
    <div style="margin:10px; width:100%; height:450px; min-height:450px">
    	<iframe id="fm" width="100%" height="450px" src="https://www.baidu.com"></iframe>
    </div>
    
    <script src="js/jquery-1-11-1.js" type="text/javascript"></script>
    <script>
		var t1 = new Date().getTime(),t2;
    	$(function(){
			$('#go').on('click',function(){
				t1 = new Date().getTime();
				var inputUrl = $('#in-url').val();
				$('#lbStatus').text('加载中...');
				$('#fm').attr('src',inputUrl);
			});	
			
			$('#in-url').on('keypress',function(){
				if(event.keyCode==13)	
					$('#go').click();
			});
			
			
			$('#fm').on('load',function(){
				t2 = new Date().getTime();
				$('#lbStatus').text('加载完毕，耗时：'+(t2-t1)+'毫秒');
			});
		});
    </script>
</body>
</html>