本教程详细介绍了如何利用javascript的`navigator.useragent`和`navigator.vendor`属性，在客户端动态检测用户设备类型和浏览器，进而控制`
引言：动态iFrame的必要性
在现代Web开发中，为了提供更个性化、更优化的用户体验，我们经常需要根据用户的设备、操作系统或浏览器类型来调整页面内容。
需要明确的是，这种基于用户代理的配置逻辑通常发生在嵌入中。父页面负责判断当前用户的环境，并据此决定是否插入
理解用户代理与iFrame
1.
2. navigator.userAgent与navigator.vendor
navigator.userAgent: 这是一个只读的字符串，包含了浏览器发送给服务器的用户代理头信息。它通常包含浏览器名称、版本、操作系统、设备类型等信息。通过解析这个字符串，我们可以推断出用户的大致环境。navigator.vendor: 这是一个只读的字符串，表示浏览器供应商的名称。例如，Chrome浏览器会返回”Google Inc.”。它有时可以作为userAgent的辅助判断条件。
虽然userAgent提供了丰富的信息，但其格式不统一，且容易被伪造，因此在进行判断时需要谨慎，并尽可能使用更可靠的特性检测。然而，对于设备、操作系统或特定浏览器类型的判断，userAgent仍然是常用的手段。
实现用户代理检测
为了实现
1. 移动设备检测
首先，我们需要一个函数来判断当前用户是否正在使用移动设备。
/** * 检测当前用户是否在移动设备上。 * @returns {boolean} 如果是移动设备则返回 true，否则返回 false。 */function isMobileDevice() { const userAgent = navigator.userAgent || navigator.vendor || window.opera; // 常见的移动设备用户代理模式 return /(android|bbd+|meego).+mobile|avantgo|bada/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|rim)|plucker|pocket|psp|series(4|6)0|symbian|treo|up.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(userAgent) || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s-)|ai(ko|rn)|al(av|ca|co)|amoi|an(d|on)|aq(ta|yo)|ar(ch|go)|as(te|us)|attw|au(di|-m|r |s )|ay(mo|bl)|bc(ad|er|ee)|bi(lo|st)|br(and|ex)|bt(on|ce)|c559|cdm- |cell|chtm|cldc|cmd- |co(mp|in|tp)|ct(og|sc)|cv(as|ie|in)|da(dc|iz)|db(tl|ad)|dd(mi|je)|de(ad|ch)|detc|di(ar|ca|co)|dk(mo|pm)|do(c|og|za)|dp(ad|eg|e |r )|el(at|fl|ri)|eu(in|pk)|ez(gk|ko|ow)|fw(er|re)|ga(lo|ki)|gecko|gr(ad|un)|haie|h|hb(nk|bl)|hp(ib|jm)|ht(c|p |tk)|hu(aw|tc)|i(0|20|25|in|go)|id(ap|ca|fr|ob|ra|te)|ie(ad|at|o |on)|jg(kl|gm)|jk(pn|co)|jo(ck|on)|ke(dc|fr|ie)|kg(mm|ow)|kl(at|ta)|ko(bi|si)|kp(pt|sr)|l2mr|la(te|og)|le(no|xi)|lg(g |li)|lm(at|ta)|l|ma(eg|er|in|bl)|mb(ck|mn)|mc(ad|er|ri)|mi(o8|oa|oo)|mk(mo|to)|ml(l|on)|mr(f|ve)|ms(c|tr)|mu(ca|te)|n(at|cn|on|sy)|ne(ad|id)|nf(rc|nw)|ng(cm|si)|ny(mo|pm)|o |oo(a|ps)|or(ad|ch|fj)|ow(th|tv)|p800|pan(a|d|t)|pdxg|pg(13|21|si)|pl(ay|ox)|pn(ez|op|tr)|pr(cg|in|u)|qa(wa|we)|qc(07|12|21|32|60|72|a4|go|jk|pn|sz)|r380|r600|raks|rim9|ro(ve|on)|s55/|sa(ge|ma|mm|pn|to)|sb(ad|at|si)|sc(00|gu|we)|sh(mo|og)|si(cr|ve)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(ad|eg|em|l |t |v )|st(57|73|th)|su(at|ui)|sv(on|te)|sy(00|es)|t(ek|er|le)|td(ae|nx)|tel(m|v)|th(eg|le)|ti(me|ma)|tk(ad|pt|sz)|tq(mb|tl)|tr(sl|ut)|ts(ke|sg)|tt(be|go)|tv(ma|rd)|tx(at|it)|ty(ap|ri)|ud(ad|eg|em|fl)|up(ex|ut)|ur(aw|tc)|v(an|us)|ve(c|r)|vi(ru|co)|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(-| )|webc|whit|wi(g |nc|nw)|wm(hw|in|lk)|wonu|x700|yas|your|zeto|zte-/i.test(userAgent.substr(0, 4));}
2. 浏览器与操作系统检测
接下来，针对Android、iOS（通常通过Safari浏览器判断）和Chrome等特定环境进行检测。
/** * 检测当前浏览器是否为Safari。 * 注意：Chrome的User-Agent字符串中也包含"Safari"，因此需要额外排除。 * @returns {boolean} 如果是Safari浏览器则返回 true，否则返回 false。 */function isSafari() { const userAgent = navigator.userAgent; return /Safari/i.test(userAgent) && !/Chrome/i.test(userAgent);}/** * 检测当前浏览器是否为Chrome。 * @returns {boolean} 如果是Chrome浏览器则返回 true，否则返回 false。 */function isChrome() { const userAgent = navigator.userAgent; const vendor = navigator.vendor; return /Chrome/i.test(userAgent) && /Google Inc/i.test(vendor);}/** * 检测当前操作系统是否为Android。 * @returns {boolean} 如果是Android系统则返回 true，否则返回 false。 */function isAndroid() { const userAgent = navigator.userAgent; return /Android/i.test(userAgent);}/** * 检测当前操作系统是否为iOS。 * @returns {boolean} 如果是iOS系统则返回 true，否则返回 false。 */function isiOS() { const userAgent = navigator.userAgent; return /iPhone|iPad|iPod/i.test(userAgent);}
动态加载iFrame内容与控制可见性
有了上述检测函数，我们就可以编写一个核心函数来根据检测结果生成不同的
以上就是根据用户代理动态控制iFrame内容与可见性的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1593287.html
微信扫一扫 
支付宝扫一扫 
