页面强制跳转&PC跳转到手机WAP&iframe完美嵌套无白边

原创 2018年04月15日 22:20:53

页面跳转方式一:

<meta http-equiv="refresh" content="0; url=http://qinbinjie.lofter.com/">

页面跳转方式二:

<script language='javascript'>document.location = 'http://www.kaigesheji.com/wangzhanjianshe/ '</script>

手机浏览PC自动跳转至WAP一:这里引用的是搜狐快站的代码

<link rel="alternate" type="application/vnd.wap.xhtml+xml" media="handheld" href="http://cqmall.kuaizhan.com/"/>
<script src="http://kzcdn.itc.cn/res/skin/js/uaredirect.js?v=4.9" type="text/javascript"></script>
<script type="text/javascript">KZ.redirect("http://m.cqzjia.com/");</script>

手机浏览PC自动跳转至WAP二:

<script LANGUAGE="JavaScript">
 function mobile_device_detect(url)
 {
        var thisOS=navigator.platform;
        var os=new Array("iPhone","iPod","iPad","android","Nokia","SymbianOS","Symbian","Windows Phone","Phone","Linux armv71","MAUI","UNTRUSTED/1.0","Windows CE","BlackBerry","IEMobile");
 for(var i=0;i<os.length;i++)
        {
 if(thisOS.match(os[i]))
        {  
  window.location=url;
 }
          
 }
 //因为相当部分的手机系统不知道信息,这里是做临时性特殊辨认
 if(navigator.platform.indexOf('iPad') != -1)
        {
  window.location=url;
 }
 //做这一部分是因为Android手机的内核也是Linux
 //但是navigator.platform显示信息不尽相同情况繁多,因此从浏览器下手,即用navigator.appVersion信息做判断
  var check = navigator.appVersion;
  if( check.match(/linux/i) )
          {
   //X11是UC浏览器的平台 ,如果有其他特殊浏览器也可以附加上条件
   if(check.match(/mobile/i) || check.match(/X11/i))
                 {
   window.location=url;
   } 
 }
 //类in_array函数
 Array.prototype.in_array = function(e)
 {
  for(i=0;i<this.length;i++)
  {
   if(this[i] == e)
   return true;
  }
  return false;
 }
 }
mobile_device_detect("http://qinbinjie.lofter.com/");
</script>

iframe完美嵌套无白边:

    <div class="ifr" onMouseOut="hideS()" onMouseOver="showS()" style="    width: 100%;    height: 100%;">
    <iframe id="test" width="100%" height="100%" frameborder="0" src="http://qinbinjie.lofter.com/" style="margin:0px;" ></iframe>
    <script language="JavaScript">  
            var iframe = document.getElementById("test");   
            iframe.src = "http://qinbinjie.lofter.com/"; 
            //以下判断iframe是否加载完,并且隐藏滚动条
            if (iframe.attachEvent){
                iframe.attachEvent("onload", function(){                                
                    //hideS();
                    //document.getElementById("loading").style.display="none";  
                });   
            } else {   
                iframe.onload = function(){
                //   hideS();                    
                //document.getElementById("loading").style.display="none";  
                };   
            }
        </script> 
    </div>

三者都需要集成HTML:

<html>
<head>
	<!-- HTML meta refresh URL redirection -->
	<!--<meta http-equiv="refresh" content="0; url=http://qinbinjie.lofter.com/">  PC页面跳转代码-->
	<!--手机页面跳转开始
	<link rel="alternate" type="application/vnd.wap.xhtml+xml" media="handheld" href="http://cqmall.kuaizhan.com/"/>
	<script src="http://kzcdn.itc.cn/res/skin/js/uaredirect.js?v=4.9" type="text/javascript"></script>
	<script type="text/javascript">KZ.redirect("http://m.cqzjia.com/");</script>
	-->
<meta charset="UTF-8">
<link rel="shortcut icon" href="http://imgsize.ph.126.net/?imgurl=http://img0.ph.126.net/H1G7tQuySMENTjpEypsSGw==/6630594975700025052.jpg_16x16x0x90.jpg" />
<title>秦彬杰的轻博客,从产品经理到产品大师</title>
<meta name="keywords" content="产品经理,人人都是产品经理,PRD,axure,axure教程,产品经理培训,产品经理招聘,交互设计,产品需求文档,产品设计,原型设计,demo,app,产品运营,互联网,移动互联网,互联网创业,产品经理论坛" />
<meta name="description" content="秦彬杰产品设计案例集合,建议用火狐浏览器打开!我的博客:www.cqzjia.com" />

<script type="text/javascript">
  function showS()
  {
    document.getElementById("test").scrolling="yes";
    document.getElementById("test").style.overflow="scroll";
    //alert(document.getElementById("test").scrolling);
     
  }
  function hideS()
  {
    document.getElementById("test").scrolling="no";
    document.getElementById("test").style.overflow="hidden";
    //alert(document.getElementById("test").style.overflow);
  }
</script>    

<--跳转到手机页面-->
<script LANGUAGE="JavaScript">
 function mobile_device_detect(url)
 {
        var thisOS=navigator.platform;
        var os=new Array("iPhone","iPod","iPad","android","Nokia","SymbianOS","Symbian","Windows Phone","Phone","Linux armv71","MAUI","UNTRUSTED/1.0","Windows CE","BlackBerry","IEMobile");
 for(var i=0;i<os.length;i++)
        {
 if(thisOS.match(os[i]))
        {  
  window.location=url;
 }
          
 }
 //因为相当部分的手机系统不知道信息,这里是做临时性特殊辨认
 if(navigator.platform.indexOf('iPad') != -1)
        {
  window.location=url;
 }
 //做这一部分是因为Android手机的内核也是Linux
 //但是navigator.platform显示信息不尽相同情况繁多,因此从浏览器下手,即用navigator.appVersion信息做判断
  var check = navigator.appVersion;
  if( check.match(/linux/i) )
          {
   //X11是UC浏览器的平台 ,如果有其他特殊浏览器也可以附加上条件
   if(check.match(/mobile/i) || check.match(/X11/i))
                 {
   window.location=url;
   } 
 }
 //类in_array函数
 Array.prototype.in_array = function(e)
 {
  for(i=0;i<this.length;i++)
  {
   if(this[i] == e)
   return true;
  }
  return false;
 }
 }
mobile_device_detect("http://qinbinjie.lofter.com/");
</script>

<style>
<!-- .ifr{width:600px;height:600px;background:#fff;overflow:hidden;display:block;position:absolute;top: 0;left: 0;right: 0;} -->
</style>
</head>
<body>
    <div class="ifr" onMouseOut="hideS()" onMouseOver="showS()" style="    width: 100%;    height: 100%;">
        <iframe id="test" width="100%" height="100%" frameborder="0" src="http://qinbinjie.lofter.com/" style="margin:0px;" ></iframe>
        <script language="JavaScript">  
            var iframe = document.getElementById("test");   
            iframe.src = "http://qinbinjie.lofter.com/"; 
            //以下判断iframe是否加载完,并且隐藏滚动条
            if (iframe.attachEvent){
                iframe.attachEvent("onload", function(){                                
                    //hideS();
                    //document.getElementById("loading").style.display="none";  
                });   
            } else {   
                iframe.onload = function(){
                //   hideS();                    
                //document.getElementById("loading").style.display="none";  
                };   
            }
        </script> 
    </div>
</body>
</html>

版权声明:©秦彬杰(花无缺)/ www.cqzjia.com https://blog.csdn.net/SentimentalVersion/article/details/79954238

Unity3d开发跳一跳

-
  • 1970年01月01日 08:00

【JavaScript】通过JavaScript的方式,如果手机浏览器访问PC版页面,自动跳转到手机版页面

这个其实根本不用自己写,因为在网上就有一个写的非常不错的js。 做到如下效果,如果是PC、平板访问这个页面,则显示PC版的页面,如果是手机访问这个页面则跳到手机版的页面,同时不加载PC版页面,直接跳...
  • yongh701
  • yongh701
  • 2015-05-07 16:08:21
  • 1818

根据访问设备自动跳转到M站

随着H5的疯狂发展和智能手机的普及,M站存在的意义越来越大,很多PC站都推出了对应的M站,根据访问的设备自动跳转到M站就显得尤为重要了。其实根据设备自动跳转,这个很简单,写个JS方法根据User-Ag...
  • lemon_qq
  • lemon_qq
  • 2016-03-10 15:14:56
  • 1924

PC端判断屏幕宽度到达手机宽度的时候,直接跳转手机页面

&amp;lt;script&amp;gt; // //判断屏幕宽度到达手机宽度的时候,直接跳转手机页面 // window.addEventListener(&quot;resize...
  • ruiguang21
  • ruiguang21
  • 2018-02-27 18:13:48
  • 106

手机访问网站自动跳转到手机页面

手机访问网站自动跳转到手机页面 //设定Mobile的定义(全小写) var mobileAgent = new Array("iphone", "ipod", "ipad", "android", ...
  • Homsune
  • Homsune
  • 2016-12-11 09:57:29
  • 1819

手机端访问PC端自动跳转到手机网站代码

方法一: try { var urlhash = window.location.hash; if (!urlhash.match("fromapp")) { if ((navigato...
  • ren9058
  • ren9058
  • 2017-08-31 16:51:22
  • 2750

手机浏览器访问PC网站,跳转到wap手机版网站

//此段代码放入script标签中,手机浏览器访问PC网页跳转到wap  function is_mobile() {     var regex_match = /(nokia|iphone|and...
  • cgtcsdn
  • cgtcsdn
  • 2016-05-11 17:40:07
  • 1747

判断PC端或移动端跳转至相应页面

JS判断PC端或移动端跳转至相应页面 if((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobil...
  • luanjingqi
  • luanjingqi
  • 2017-03-14 16:49:14
  • 339

根据不同访问设备跳转到PC页面或手机页面

目前很多网站都是采用了响应式自适应页面的设计了,根据访问设备的不同,显示不同的内容。但是还是会有一些节奏比较慢的网站,还是PC页面和手机PAD页面不同的访问域名。正好我这里有个需要,同一个域名要根据不...
  • lwg910919an
  • lwg910919an
  • 2017-07-31 16:50:05
  • 597

手机访问PC站时自动跳转到手机站

当用手机浏览器访问pc网站时,自动跳转到对应的手机网站
  • evasunny2008
  • evasunny2008
  • 2016-12-02 11:47:08
  • 1239
收藏助手
不良信息举报
您举报文章:页面强制跳转&PC跳转到手机WAP&iframe完美嵌套无白边
举报原因:
原因补充:

(最多只允许输入30个字)