为弹出窗口动态加载 css 文件

Posted 2023-02-27

【中文标题】为弹出窗口动态加载 css 文件

【英文标题】：Dynamicly loading css files for popup window

【发布时间】：2011-12-07 02:42:56

【问题描述】：

我有一个页面，我希望在其中单击以向用户显示带有 css 样式的弹出窗口。 每个弹出窗口都是通过 ajax 从 php 后端获取的 html，其中大多数需要不同的 css 文件。我不能在一开始就包含所有的css文件，因为有些会覆盖其他文件，所以我必须为特定的html动态加载特定的css。 所以我输入了这个

文件1： 链接类型="文本/css" rel="样式表" href="/css/popup1.css" 文件 2： 链接类型="文本/css" rel="样式表" href="/css/popup2.css" 等等。 在每个 html 弹出窗口的开头。

这在大多数情况下都有效，但有时看起来 css 被忽略了，html 显示在页面底部，没有样式。

我尝试加载 css 文件并将其附加到头部，然后再获取 html，如下所示：

var css = document.createElement("link"); $(css).attr('type', 'text/css'); $.get('/css/popup1.css', function(result) $(css).html(结果); $('head').append(css); $.get('/fetchHtmlPopup.php', 函数(数据) $(容器).html(数据); $(container).fadeIn('fast'); ); );

这似乎可行，但实际上这种方式有时也会失败，我仍然不知道是什么原因导致这段代码有时可以正常工作，有时会失败。 最困扰我的是这两种解决方案都有效，有时他们没有t I cant 找到导致此问题的特定操作。

有人知道我该怎么办吗？

【参考方案1】：

您面临的问题可能是由于加载 css 文件和对话框 html 的顺序。根据是先加载 css 还是加载 HTML，行为可能会有所不同。

有两种方法可以解决这个问题。

弹出框最好有一个父容器，让父容器上的样式控制内部元素的样式。示例代码如下，

绿色 > leftBox .... 蓝色 > leftBox ....

...

另一种方法是使用 jquery 将样式应用于必要的元素。只有在要应用的样式数量非常少的情况下才能采用这种方法。

【讨论】：

它们每个大约有 600 行 CSS，因此在这种情况下使用 js 应用样式是不可行的。我ll try to include all css files, make them class specific and change only the class of the container. We会看到。感谢您的建议

【参考方案2】：

尝试添加错误处理程序并检查错误消息以找出您的问题

$.get(
url: "/css/popup1.css", 
success: function(result)
            $(css).html(result);
            $('head').append(css);

            $.get(
                url: "/fetchHtmlPopup.php",
                success: function(data)
                        $(cotainer).html(data);
                        $(container).fadeIn("fast");
                    ,
                error: function (xhr, ajaxOptions, thrownError)
                    alert(xhr.status);
                    alert(thrownError);
                );
       ,
error: function (xhr, ajaxOptions, thrownError)
                    alert(xhr.status);
                    alert(thrownError);
                 );

你当然可以稍微清理一下上面的代码。