IE7和IE8随机无法加载外部脚本
atw*_*tor 7 javascript css dom internet-explorer-8 internet-explorer-7
<link>一旦DOM准备好,我就会动态地向头部添加元素.但是,我在IE8和IE7中得到了不一致的结果(所有其他浏览器都很好).
每次加载(缓存或未缓存)页面时,IE 7/8都会在样式表中删除一些CSS规则.我的动态样式表中的1或2个不会加载.它总是与IE倾向于忽略的1或2个样式表相同 - 即使开发人员工具栏将它们显示为添加到头部!.
样式表本身<link>在最终DOM中显示为元素,但是它们的一些规则未应用(尽管每次重新加载它们都没有任何问题).
在我的位置,我没有从<head>(CMS限制)编写代码的奢侈- 我只能从身体动态插入,这可能是问题.
更新:这是我正在使用的代码(位于其中<body>)以插入样式表:
document.observe('dom:loaded', function() { // Using Prototype.js
// Add stylesheets
// addStylesheet('cite.css', 'head'); // Contains no webfont/@font-face rules
// addStylesheet('type.css', 'head'); // Contains webfont family name references*
// addStylesheet('flex.css', 'head'); // Responsive rules with @media queries
// addStylesheet('anm8.css', 'head'); // Some minor positional CSS for home page
// addStylesheet('gothic-cite.css', 'head'); // *Contains @font-face config
// addStylesheet('stag-cite.css', 'head'); // *Contains @font-face config
addStylesheet('all.css', 'head'); // Contains ALL content from above in 1 file
function addStylesheet(cssname, pos2)
{
var th2 = document.getElementsByTagName(pos2)[0];
var s2 = document.createElement('link');
s2.setAttribute('type', 'text/css');
s2.setAttribute('href', cssname);
s2.setAttribute('media', 'screen');
s2.setAttribute('rel', 'stylesheet');
th2.appendChild(s2);
}
});
正如所建议的那样,即使我将所有规则组合成一个样式表(我讨厌这样做),IE 7/8继续按照一些规则进行触发,页面显示不同.
作为进一步检查,我还从样式表中删除了所有@font-face和引用的font-family: "webfont-name"规则,并继续相同的行为.因此,我们可以排除webfonts成为问题.
您可以通过使用IE8访问以下内容并多次刷新/单击导航来查看异常.当IE8放弃这些样式时,似乎完全随机.但是,在本机构建的控制页面中,每次都会正确加载所有样式.
实时页面(有问题)
https://www.eiseverywhere.com/ehome/index.php?eventid=31648&tabid=50283
- 基于PHP的CMS在页面加载时打印出XHTML(模板内容与用户内容混合)
Prototype.js在页面加载时默认加载并初始化scripts.js在页面加载时解析CMS专有文件- 我的脚本在加载DOM时运行,基本上
body.innerHTML只用我想要的HTML 替换CMS fluff-HTML,然后添加样式表<head>. - 因为
lte IE 8,CSS扩展插件(selectivizr.js,html5.js和ie-media-queries.js)在<body>via条件注释中加载.不确定他们是否在等待DOM:loaded...... 该CMS所见即所得的编辑器的所有回车符号转换为空的
<p>标签,导致相同的元件<section>被包含打破内部<p>的标签,并额外<p></p>创建标签这里的空白,预计.lt IE 8但是,似乎只是扼杀了这一点,所以我添加了以下CSS规则来解决这个问题:
Run Code Online (Sandbox Code Playgroud):not(.ie7) p { display: none; } .ie7 p { display: inline; } article p { display: block !important; }我应该注意,这里的外部样式表是从同一个域中提取的,但每次重新上载时,都会为该文件生成一个新的基于MD5的URL.我不确定以前的文件(或以前的文件)的先前版本是否仍然可用于以前的URL.这可能不是问题,因为新创建的
all.css样式表仍然从一开始就删除了文件中的规则.
控制页面(完美无瑕)
http://client.clevelanddesign.com/CD/IDG/CITE/home.html
- 纯XHTML文档 - 没有PHP.
- 对于IE8及以下版本,使用jQuery而不是Prototype.
- 所有资源(样式表)都出现在
<head>页面加载中 - 没有动态插入 - 因为
lte IE 8,CSS扩展插件(selectivizr.js,html5.js和ie-media-queries.js)本地初始化.
重新提问:
您认为哪些差异可能会导致IE 7/8在Live页面上加载时触发样式？我个人怀疑是竞争条件问题,还是那个Prototype.js和其他CMS脚本混淆了(遗憾的是没有办法从页面中清除那些).
PS:我已经尝试过使用IE的createStylsheet()功能,但无济于事.
更新 - 在IE8中工作/不工作的屏幕截图
IE8:正确加载时的DOM代码:
IE8:DOM代码时不正确加载:
Jos*_*hua -1
首先我要说的是，我参与了多个项目，团队已经开始通过 Javascript 动态生成 DOM，包括通过 CORS 远程加载脚本。
经过 3 个不同项目（以及每个项目使用不同方法）的数月努力，我们最终不得不面对这样一个事实：IE7 和 IE8 无法正确或一致地动态加载和处理外部脚本或 CSS。
我的建议是整合/组合 PHP/服务器端的任何脚本，并作为可以在客户端缓存的单个文件提供服务。
额外说明一下，IE 不完全是罪魁祸首。以正确的顺序下载、处理和渲染脚本/CSS 涉及到巨大的复杂性，并且对该过程进行编程以使其在每个环境（webkit + mozilla + IE9+）中都能正常工作，需要接近专家水平的知识和非常彻底的测试。
就您而言，不良“流程”的一个例子是，当我专门查看您的页面时，它会在屏幕“更新”并且引入并应用 CSS 之前短暂显示未应用 CSS 的页面（恶心！）。坏坏坏。
我注意到的其他问题是总体上存在大量的 httprequests。每个都需要 DNS 查找、缓存/过期检查（以及标头规定的其他内容）以及随后的响应下载。在台式机上，这并不是那么明显，但在移动设备、平板电脑，甚至一些速度较慢/陷入困境的 PC 上，这一点尤其明显。
如果您正在当今的浏览环境中构建 Web 应用程序并且只有一个小团队，那么最好是：
- 将 CSS 作为来自 CDN 的单个可缓存文件以及预解析、预迭代、预渲染 HTML 块中的页面提供，从而最大限度地减少客户端 JS 处理（仅在加载后绑定元素），或者
- 使用预先存在的客户端框架，例如 Sencha、SproutCore、YUI 等 - 他们已经为您构建了框架并修复了所有错误。
在我改变观点之前，必须发生两件事：IE8 必须从一般使用中消失（下降到 10% 以下），并且“普通”移动设备需要有 2 个物理处理器核心。目前只有昂贵/高端型号才配备双核处理器。
另外值得注意的是，即使使用 JIT JS 编译器，最快的移动处理器在 JS 性能方面仍然比典型台式机慢 10 倍 - 直接与台式机相比，可以与 Pentium 4 或旧的 AMD Athlon 64 正面竞争。