草庐IT

javascript - IE7 和 IE8 随机无法加载外部脚本

coder 2024-07-26 原文

我正在动态添加 <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 何时删除这些样式似乎是完全随机的。但是,在 native 构建的控件页面中,所有样式每次都正确加载。

实时页面(有问题)

https://www.eiseverywhere.com/ehome/index.php?eventid=31648&tabid=50283
  • 基于 PHP 的 CMS 在页面加载时打印出 XHTML(模板内容与用户内容混合)
  • Prototype.js默认情况下在页面加载时加载和初始化
  • CMS 专有 scripts.js文件在页面加载时被解析
  • 我的脚本在加载 DOM 时运行,基本上取代了 body.innerHTML CMS fluff-HTML 仅包含我想要的 HTML,然后 将样式表添加到 <head> .
  • 对于 lte IE 8 ,CSS 扩展插件(selectivizr.js、html5.js 和 ie-media-queries.js)加载在 <body> 中。通过条件注释。不确定他们是否在等待 DOM:loaded ...
  • CMS 所见即所得编辑器将所有回车符转换为空 <p>标签 ,产生像 <section> 这样的元素被包含在 splinter 的内部 <p>标签和额外的 <p></p>在需要空格的地方创建标签。只有 lt IE 8然而,似乎对此感到窒息,所以我添加了以下 CSS 规则来解决这个问题:
    :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 代码时 不是 正确加载:

    最佳答案

    我已经确定了到底发生了什么,但仍然不知道触发器的原因:
    selectivizr.js每隔几页加载就没有正确加载。

    所有使用 CSS3 选择器的规则都需要在 IE 7/8 中应用该脚本。因此当 IE 7/8 不加载时 selectivizr.js正确地,这些规则将被忽略。这些规则当然包括 webfont 引用,以及错误的 <p>显示属性。

    提醒大家,在我的脚本替换 <body> 之前,这些辅助 JS 脚本在初始页面加载时正常加载(从 <body> 内)。内容(包括该脚本引用)。因此,它有可能初始化两次(有人可以确认这一点吗?)

    麻烦的是,在控制网站上,selectivizr.js在 IE 7/8 中始终正确加载。 CSS3 帮助程序 js 和媒体查询帮助 js 文件(正确初始化时)之间也没有已知的不兼容性。

    我删除了 selectivizr.js从页面和页面在 20 多次刷新后以完全相同的方式加载。恢复一致性很好,糟糕的是我在 IE 7/8 中丢失了 CSS3 规则。

    显然,这就是有问题的 js 插件的工作原理:

    In accordance with the W3C specs, a web browser should discard style rules it doesn’t understand. This presents a problem — we need access to the CSS3 selectors in the style sheet but IE throws them away. To avoid this issue each style sheet is downloaded using a XMLHttpRequest. This allows the script to bypass the browsers internal CSS parser and gain access to the raw CSS file.



    来源:http://www.css3.info/css3-pseudo-selectors-emulation-in-internet-explorer/

    我可以尝试您可能拥有的任何建议的 CSS3 选择器插件;也许一个人会加载更可靠,或者开销更少,因此与滞后相关的问题的空间更小。任何替代方案?

    或者,也许我应该在 DOM 第二次准备好后(在我的脚本替换正文内容之后)将它添加到 <head>或在 <body> 中的其他地方.这些选择都没有奏效——即使不是更糟,它们的结果也是一样的。

    关于javascript - IE7 和 IE8 随机无法加载外部脚本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8660508/

    有关javascript - IE7 和 IE8 随机无法加载外部脚本的更多相关文章

    1. ruby-on-rails - 由于 "wkhtmltopdf",PDFKIT 显然无法正常工作 - 2

      我在从html页面生成PDF时遇到问题。我正在使用PDFkit。在安装它的过程中,我注意到我需要wkhtmltopdf。所以我也安装了它。我做了PDFkit的文档所说的一切......现在我在尝试加载PDF时遇到了这个错误。这里是错误:commandfailed:"/usr/local/bin/wkhtmltopdf""--margin-right""0.75in""--page-size""Letter""--margin-top""0.75in""--margin-bottom""0.75in""--encoding""UTF-8""--margin-left""0.75in""-

    2. ruby-on-rails - 无法使用 Rails 3.2 创建插件? - 2

      我对最新版本的Rails有疑问。我创建了一个新应用程序(railsnewMyProject),但我没有脚本/生成,只有脚本/rails,当我输入ruby./script/railsgeneratepluginmy_plugin"Couldnotfindgeneratorplugin.".你知道如何生成插件模板吗?没有这个命令可以创建插件吗?PS:我正在使用Rails3.2.1和ruby​​1.8.7[universal-darwin11.0] 最佳答案 随着Rails3.2.0的发布,插件生成器已经被移除。查看变更日志here.现在

    3. ruby - 无法运行 Rails 2.x 应用程序 - 2

      我尝试运行2.x应用程序。我使用rvm并为此应用程序设置其他版本的ruby​​:$rvmuseree-1.8.7-head我尝试运行服务器,然后出现很多错误:$script/serverNOTE:Gem.source_indexisdeprecated,useSpecification.Itwillberemovedonorafter2011-11-01.Gem.source_indexcalledfrom/Users/serg/rails_projects_terminal/work_proj/spohelp/config/../vendor/rails/railties/lib/r

    4. ruby - 如何在续集中重新加载表模式? - 2

      鉴于我有以下迁移:Sequel.migrationdoupdoalter_table:usersdoadd_column:is_admin,:default=>falseend#SequelrunsaDESCRIBEtablestatement,whenthemodelisloaded.#Atthispoint,itdoesnotknowthatusershaveais_adminflag.#Soitfails.@user=User.find(:email=>"admin@fancy-startup.example")@user.is_admin=true@user.save!ende

    5. ruby-on-rails - 无法在centos上安装therubyracer(V8和GCC出错) - 2

      我正在尝试在我的centos服务器上安装therubyracer,但遇到了麻烦。$geminstalltherubyracerBuildingnativeextensions.Thiscouldtakeawhile...ERROR:Errorinstallingtherubyracer:ERROR:Failedtobuildgemnativeextension./usr/local/rvm/rubies/ruby-1.9.3-p125/bin/rubyextconf.rbcheckingformain()in-lpthread...yescheckingforv8.h...no***e

    6. ruby - 无法让 RSpec 工作—— 'require' : cannot load such file - 2

      我花了三天的时间用头撞墙,试图弄清楚为什么简单的“rake”不能通过我的规范文件。如果您遇到这种情况:任何文件夹路径中都不要有空格!。严重地。事实上,从现在开始,您命名的任何内容都没有空格。这是我的控制台输出:(在/Users/*****/Desktop/LearningRuby/learn_ruby)$rake/Users/*******/Desktop/LearningRuby/learn_ruby/00_hello/hello_spec.rb:116:in`require':cannotloadsuchfile--hello(LoadError) 最佳

    7. ruby - RuntimeError(自动加载常量 Apps 多线程时检测到循环依赖 - 2

      我收到这个错误:RuntimeError(自动加载常量Apps时检测到循环依赖当我使用多线程时。下面是我的代码。为什么会这样?我尝试多线程的原因是因为我正在编写一个HTML抓取应用程序。对Nokogiri::HTML(open())的调用是一个同步阻塞调用,需要1秒才能返回,我有100,000多个页面要访问,所以我试图运行多个线程来解决这个问题。有更好的方法吗?classToolsController0)app.website=array.join(',')putsapp.websiteelseapp.website="NONE"endapp.saveapps=Apps.order("

    8. ruby - 无法覆盖 irb 中的 to_s - 2

      我在pry中定义了一个函数:to_s,但我无法调用它。这个方法去哪里了,怎么调用?pry(main)>defto_spry(main)*'hello'pry(main)*endpry(main)>to_s=>"main"我的ruby版本是2.1.2看了一些答案和搜索后,我认为我得到了正确的答案:这个方法用在什么地方?在irb或pry中定义方法时,会转到Object.instance_methods[1]pry(main)>defto_s[1]pry(main)*'hello'[1]pry(main)*end=>:to_s[2]pry(main)>defhello[2]pry(main)

    9. ruby - 无法在 60 秒内获得稳定的 Firefox 连接 (127.0.0.1 :7055) - 2

      我使用的是Firefox版本36.0.1和Selenium-Webdrivergem版本2.45.0。我能够创建Firefox实例,但无法使用脚本继续进行进一步的操作无法在60秒内获得稳定的Firefox连接(127.0.0.1:7055)错误。有人能帮帮我吗? 最佳答案 我遇到了同样的问题。降级到firefoxv33后一切正常。您可以找到旧版本here 关于ruby-无法在60秒内获得稳定的Firefox连接(127.0.0.1:7055),我们在StackOverflow上找到一个类

    10. ruby - 安装 Ruby 时遇到问题(无法下载资源 "readline--patch") - 2

      当我尝试安装Ruby时遇到此错误。我试过查看this和this但无济于事➜~brewinstallrubyWarning:YouareusingOSX10.12.Wedonotprovidesupportforthispre-releaseversion.Youmayencounterbuildfailuresorotherbreakages.Pleasecreatepull-requestsinsteadoffilingissues.==>Installingdependenciesforruby:readline,libyaml,makedepend==>Installingrub

    随机推荐