背景故事

Question

背景故事

我正在创建一个Web应用程序，其中通过jQuery .load函数“加载”各个页面。最初加载的页面是单个文件，但随着时间的推移，我决定将其拆分为.html文件，.css文件和.js文件。

奇怪的是，围绕使用css中的百分比值定位的元素出现了一个设计缺陷。为了查看我移动时是否修改了样式，我替换了style标记（省略了link标记），它运行正常。返回和第四次，我知道它只是在我使用link标签而不是通过style标签嵌入时才严格发生。

我想使用link标签，所以我试图缩小问题范围。经过一段时间的摆弄，我将其追溯到.js文件，特别是在.focus上使用$(document).ready函数。如果我注释掉.focus，一切正常。取消注释，它会中断。

这似乎只发生在Chrome中。它不会出现在FF26或IE11中。

实施例

A fiddle.

请注意，问题只发生在Chrome中，并且必须禁用缓存。由于Chrome的临时缓存禁用功能未扩展到iframe的iframe，因此direct result更易于使用。

Answer 1

当.load（）方法完成并且DOM已更新时，jQuery提供了一个回调函数。这是您希望对从外部URL插入的元素进行操作的地方。

<script>
    $(document).ready(function() {
        $('#content').load('html/portal.html', function() {
            //now i can operate on elements loaded from html/portal.html
            //they have been inserted into the DOM
            $('input#input').focus();
        })
    });
</script>

至于对link元素的引用，如果你想使用javascript从外部url动态加载样式表，你可以使用这样的javascript函数：

//load deferred stylesheets 
function loadStyleSheet(src) {
    if (document.createStyleSheet) {
        document.createStyleSheet(src);
    } else {
        $("head").append($("<link rel='stylesheet' href='"+src+"' type='text/css' media='screen' />"));
    }
}

如果要加载外部javascript文件，可以使用jQuery.getScript（）：

jQuery.getScript('/js/external.js');

所以把所有这些放在一起，如果你想从外部资源加载一些内容，把它插入到DOM中，加载外部样式表和外部javascript资源，你可以这样做：

<!DOCTYPE html>
<html>
<head>
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script>
        $(document).ready(function() {
            //function to load a deferred stylesheets 
            var loadStyleSheet = function(src) {
                if (document.createStyleSheet) {
                    document.createStyleSheet(src);
                } else {
                    $("head").append($("<link rel='stylesheet' href='"+src+"' type='text/css' media='screen' />"));
                }
            }

            $('#someWrapper').load('external-url.html #someWrapper > *', function() {
                loadStyleSheet('/css/external.css');
                jQuery.getScript('/js/external.js');
            })
        });

    </script>
</head>

<body>

    <div id="someWrapper">
        <!-- external content is loaded here -->
    </div>

</body>

</html>

jQuery.load（），jQuery.focus（）和链接标记之间的冲突

背景故事

实施例

1 个答案: