使用iframe框架 截取外部部分页面嵌套（可以排除浏览器比例缩放影响）

html页面代码

<div id="vehicleMonitoring"  style="overflow:hidden;position:relative;width:100%;height:100%;">  
  <iframe id="myframe" frameborder="0" style="position:relative;"></iframe>
</div>

js控制代码

//车辆监控页面初始化
app.controller("vehicleMonitoring", function ($scope) { 
 var url = "http://blog.csdn.net/shaobingj126/article/details/23676759/";
 //var url = "http://10.83.3.146:8080/jsofgisui/index.html";
 var index = detectZoom();
 
 var width = index * 1+"%";
 var height = index * 1.1+"%";
 var top = index * (-0.1)+"%";
 
 $("#myframe").attr("src",url);
 $("#myframe").css("width","100%");
 $("#myframe").css("height",height);
 $("#myframe").css("top",top);
 
})

//浏览器比例缩放触发事件
$(window).resize(function() {
 var url = "http://blog.csdn.net/shaobingj126/article/details/23676759/"; 
 var index = detectZoom();
 
 var width = index * 1+"%";
 var height = index * 1.1+"%";
 var top = index * (-0.1)+"%";
 
 $("#myframe").attr("src",url);
 $("#myframe").css("width","100%");
 $("#myframe").css("height",height);
 $("#myframe").css("top",top);
});

//查看浏览器缩放比例
function detectZoom (){
   var ratio = 0,
     screen = window.screen,
     ua = navigator.userAgent.toLowerCase();
  
    if (window.devicePixelRatio !== undefined) {
       ratio = window.devicePixelRatio;
   }
   else if (~ua.indexOf('msie')) { 
     if (screen.deviceXDPI && screen.logicalXDPI) {
       ratio = screen.deviceXDPI / screen.logicalXDPI;
     }
   }
   else if (window.outerWidth !== undefined && window.innerWidth !== undefined) {
     ratio = window.outerWidth / window.innerWidth;
   }
    
    if (ratio){
     ratio = Math.round(ratio * 100);
   }
    
    return ratio;
};