当 Web 开发 逐渐复杂时，为了方便和传统的后端系统配合，一个页面可能需要划分成不同的 <iframe /> 来实现。这样子页面就会比较多，但它们又要有一致的用户体验，让用户看不出来是多个页面的组合，这就要求这么多父子页面共享一些 CSS。
　　每新建一个页面就引入这些公共 CSS 吗？有 JavaScript 还怕不能“偷懒”？嘿嘿，实践干货来了 ——

//  一些实用的封装
var IE_Ver = UA.match(/MSIE (\d)\.\d/i) ||
             UA.match(/Trident\/.+; rv:(\d+)\.\d/i);
IE_Ver = IE_Ver ? Number(IE_Ver[1]) : NaN;
var old_IE = IE_Ver && (IE_Ver < 9);

function $_TN(HTML_Elements, TagName) {
    return HTML_Elements.getElementsByTagName(TagName);
}
function PagePath_IE(_BOM) {
    var _PP = _BOM.document.URL;
    _PP = _PP.split('/');
    if (_PP.length > 3) _PP.pop();
    _PP.push('');
    return _PP.join('/');
}
//  遍历父页面的样式表，并拷贝 样式表元素
var SS = parent.document.styleSheets;
for (var i = 0, CSS_URL; i < SS.length; i++) {
    var LE = SS[i][old_IE ? 'owningElement' : 'ownerNode'];
    if (LE.rel.indexOf('nofollow') > -1)
        continue;
    CSS_URL = SS[i].href;
    if (IE_Ver < 8)
        CSS_URL = PagePath_IE(parent) + CSS_URL;
    DOM_Head.appendChild( LE.cloneNode(true) ).href = CSS_URL;
}

把上述代码放在一个独立的脚本中（比如叫 CSS_Inherit.js），然后每一个子页面只需先引入这个脚本，再把自己专用的 CSS 文件在其后引入即可~

---

【注】以上代码 摘编自本人开发的 EasyImport.js v0.8