框架调用自适应模板 判定pc端和移动端分别执行js


<script>
if (screen && screen.width >768 ) {
document.write('<script src="/dome.js" type="text/javascript"><\/script>');
}
</script>

用这个js 虽然可以实现 pc端 和 移动端的 判定执行。但框架调用则会失效。
需要达到 1个静态页,两次框架调用自适应模板,分别展示 pc端和移动端,但移动端中 有段js不需要执行。不知道该如何实现,

1、可以调整 iframe 调用属性 来实现
2、可以调整 js 判断来实现
3、如果有更好的方法也可参考。

如有会的大niu请详细告知具体写法,谢谢!

以下是我用的框架调用 仅供参考

<iframe id="iframe" src="../index.html" frameborder="0" width="100%"></iframe>
<div id='mobileFrame' class='' style='position: absolute; z-index: 999; width: 297px; height: 420px; right: 40px; bottom: 20px; padding: 32px 8px; background-image: url(/dome/img/small_phone.png);'>
<div id='hidemobile'>×</div>
<iframe src="../index.html" frameborder='0' style='width: 297px; height: 400px;' allowfullscreen></iframe>
</div>

<div id="showmobile" style="position: absolute; right: 16px; bottom: 200px; z-index: 999; width: 47px; height: 60px; cursor: pointer; display: none; background-image: url(/dome/img/phoneTip_right.png);">
</div>


   var userAgentInfo = navigator.userAgent;
   var mobileAgents = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"];

然后就可以判断啦,另外可以通过分辨率判断,这样比较严谨

响应式? 还是 移动端 和pc 用的不是一个 js文件 需要 获取 设备 信息来判断 是哪个端


/**
 * 判断设备是否android
 * @returns {boolean}
 */
function isAndroid(){
  let u = navigator.userAgent;
  let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
  //let isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
  return isAndroid;
}

/**
 * 判断设备是否ios
 * @returns {boolean}
 */
function isIos(){
  let u = navigator.userAgent;
  let isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
  return isiOS;
}