本教程详细介绍了如何利用javascript的`navigator.useragent`和`navigator.vendor`属性，在客户端动态检测用户设备类型和浏览器，进而控制`
引言：动态iFrame的必要性
在现代Web开发中，为了提供更个性化、更优化的用户体验，我们经常需要根据用户的设备、操作系统或浏览器类型来调整页面内容。<iframe>作为嵌入外部内容的强大工具，其内容和可见性的动态控制尤为重要。例如，一个广告横幅可能只希望在移动设备上显示，并且针对Android和iOS用户展示不同的广告内容。本文将深入探讨如何利用客户端JavaScript实现这一目标，主要通过检测用户代理（User-Agent）字符串来动态配置<iframe>。
需要明确的是，这种基于用户代理的配置逻辑通常发生在嵌入<iframe>的父页面中。父页面负责判断当前用户的环境，并据此决定是否插入<iframe>元素，以及该<iframe>的src属性应指向何处。
理解用户代理与iFrame
1. <iframe>基础
<iframe>（内联框架）元素允许你将另一个HTML文档嵌入到当前HTML文档中。它像是一个独立的浏览器窗口，可以加载任何URL指向的网页。通过动态修改<iframe>的src属性或其父元素的CSS样式，我们可以实现对<iframe>内容和可见性的灵活控制。
2. navigator.userAgent与navigator.vendor
- navigator.userAgent: 这是一个只读的字符串，包含了浏览器发送给服务器的用户代理头信息。它通常包含浏览器名称、版本、操作系统、设备类型等信息。通过解析这个字符串，我们可以推断出用户的大致环境。
- navigator.vendor: 这是一个只读的字符串，表示浏览器供应商的名称。例如，Chrome浏览器会返回"Google Inc."。它有时可以作为userAgent的辅助判断条件。
虽然userAgent提供了丰富的信息，但其格式不统一，且容易被伪造，因此在进行判断时需要谨慎，并尽可能使用更可靠的特性检测。然而，对于设备、操作系统或特定浏览器类型的判断，userAgent仍然是常用的手段。
实现用户代理检测
为了实现<iframe>的动态加载，我们需要编写一系列JavaScript函数来检测用户的环境。
1. 移动设备检测
首先，我们需要一个函数来判断当前用户是否正在使用移动设备。
/**
* 检测当前用户是否在移动设备上。
* @returns {boolean} 如果是移动设备则返回 true，否则返回 false。
*/
function isMobileDevice() {
const userAgent = navigator.userAgent || navigator.vendor || window.opera;
// 常见的移动设备用户代理模式
return /(android|bb\d+|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>内容，并控制其可见性。
