将样式表包含在<；头>；给出与javascript附加到头部不同的结果_Javascript_Jquery_Html_Stylesheet

将样式表包含在<；头>；给出与javascript附加到头部不同的结果

javascript jquery html

将样式表包含在<；头>；给出与javascript附加到头部不同的结果,javascript,jquery,html,stylesheet,Javascript,Jquery,Html,Stylesheet,使用HTML5和jQuery，我想实现JPlayer（来自www.JPlayer.org）不幸的是，我不能让它以我想要的方式工作。最后，我的问题似乎是样式表“包含”的问题。由于某种原因，我不明白，当使用“jqueryappendtohead”而不是“html链接”时，样式表不能正常工作。该文件被明确地包括在内，但是当启动javascript操作时，GUI被弄乱了我附上了这两个例子，可以用于任何地方的测试。我只对不同的行进行了评论这是第一个文件。此示例按预期工作： <!DOCTYPE

使用HTML5和jQuery，我想实现JPlayer（来自www.JPlayer.org）

不幸的是，我不能让它以我想要的方式工作。最后，我的问题似乎是样式表“包含”的问题。由于某种原因，我不明白，当使用“jqueryappendtohead”而不是“html链接”时，样式表不能正常工作。该文件被明确地包括在内，但是当启动javascript操作时，GUI被弄乱了

我附上了这两个例子，可以用于任何地方的测试。我只对不同的行进行了评论

这是第一个文件。此示例按预期工作：

<!DOCTYPE html>

<head>
    <meta charset="utf-8" />
    <title>Test with link rel</title>

    <!-- ONLY DIFFERENCE IS THIS LINE -->
    <link rel="stylesheet" type="text/css" href="http://www.jplayer.org/latest/skin/blue.monday/jplayer.blue.monday.css" />
    <!-- END -->

</head>

<body>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<script type="text/javascript" src="http://www.jplayer.org/latest/js/jquery.jplayer.min.js"></script>

<div id="jquery_jplayer_1" class="jp-jplayer"></div>

<div id="jp_container_1" class="jp-audio">
    <div class="jp-type-single">
        <div class="jp-gui jp-interface">
            <ul class="jp-controls">
                <li><a href="javascript:;" class="jp-play" tabindex="1">play</a></li>
                <li><a href="javascript:;" class="jp-pause" tabindex="1">pause</a></li>
                <li><a href="javascript:;" class="jp-stop" tabindex="1">stop</a></li>
                <li><a href="javascript:;" class="jp-mute" tabindex="1" title="mute">mute</a></li>
                <li><a href="javascript:;" class="jp-unmute" tabindex="1" title="unmute">unmute</a></li>
                <li><a href="javascript:;" class="jp-volume-max" tabindex="1" title="max volume">max volume</a></li>
            </ul>
            <div class="jp-progress">
                <div class="jp-seek-bar">
                    <div class="jp-play-bar"></div>
                </div>
            </div>
            <div class="jp-volume-bar">
                <div class="jp-volume-bar-value"></div>
            </div>
            <div class="jp-time-holder">
                <div class="jp-current-time"></div>
                <div class="jp-duration"></div>

                <ul class="jp-toggles">
                    <li><a href="javascript:;" class="jp-repeat" tabindex="1" title="repeat">repeat</a></li>
                    <li><a href="javascript:;" class="jp-repeat-off" tabindex="1" title="repeat off">repeat off</a></li>
                </ul>
            </div>
        </div>
        <div class="jp-title">
            <ul>
                <li>Cro Magnon Man</li>
            </ul>
        </div>
        <div class="jp-no-solution">
            <span>Update Required</span>
            To play the media you will need to either update your browser to a recent version or update your <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>.
        </div>
    </div>
</div>

<script type="text/javascript">
    $("#jquery_jplayer_1").jPlayer({ready: function (event) {$(this).jPlayer("setMedia", {m4a:"http://www.jplayer.org/audio/m4a/TSP-01-Cro_magnon_man.m4a"});},supplied: "m4a",wmode: "window",smoothPlayBar: true,keyEnabled: true});
</script>

</body>

</html>

<!DOCTYPE html>

<head>
    <meta charset="utf-8" />
    <title>Test with jquery appendTo</title>
</head>

<body>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<script type="text/javascript" src="http://www.jplayer.org/latest/js/jquery.jplayer.min.js"></script>

<div id="jquery_jplayer_1" class="jp-jplayer"></div>

<div id="jp_container_1" class="jp-audio">
    <div class="jp-type-single">
        <div class="jp-gui jp-interface">
            <ul class="jp-controls">
                <li><a href="javascript:;" class="jp-play" tabindex="1">play</a></li>
                <li><a href="javascript:;" class="jp-pause" tabindex="1">pause</a></li>
                <li><a href="javascript:;" class="jp-stop" tabindex="1">stop</a></li>
                <li><a href="javascript:;" class="jp-mute" tabindex="1" title="mute">mute</a></li>
                <li><a href="javascript:;" class="jp-unmute" tabindex="1" title="unmute">unmute</a></li>
                <li><a href="javascript:;" class="jp-volume-max" tabindex="1" title="max volume">max volume</a></li>
            </ul>
            <div class="jp-progress">
                <div class="jp-seek-bar">
                    <div class="jp-play-bar"></div>
                </div>
            </div>
            <div class="jp-volume-bar">
                <div class="jp-volume-bar-value"></div>
            </div>
            <div class="jp-time-holder">
                <div class="jp-current-time"></div>
                <div class="jp-duration"></div>

                <ul class="jp-toggles">
                    <li><a href="javascript:;" class="jp-repeat" tabindex="1" title="repeat">repeat</a></li>
                    <li><a href="javascript:;" class="jp-repeat-off" tabindex="1" title="repeat off">repeat off</a></li>
                </ul>
            </div>
        </div>
        <div class="jp-title">
            <ul>
                <li>Cro Magnon Man</li>
            </ul>
        </div>
        <div class="jp-no-solution">
            <span>Update Required</span>
            To play the media you will need to either update your browser to a recent version or update your <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>.
        </div>
    </div>
</div>

<!-- ONLY DIFFERENCE IS THES LINES -->
<script type="text/javascript">
    $("#jquery_jplayer_1").jPlayer({ready: function (event) {$(this).jPlayer("setMedia", {m4a:"http://www.jplayer.org/audio/m4a/TSP-01-Cro_magnon_man.m4a"});},supplied: "m4a",wmode: "window",smoothPlayBar: true,keyEnabled: true});
    $('<link>', { rel: 'stylesheet', type: 'text/css', href: 'http://www.jplayer.org/latest/skin/blue.monday/jplayer.blue.monday.css' }).appendTo('head');
</script>
<!-- END -->

</body>

</html>


使用链接rel进行测试













克罗马侬人

需要更新
要播放媒体，您需要将浏览器更新为最新版本，或更新浏览器。
$（“#jqueryjplayer_1”）.jplayer（{ready:function（event）{$（this.jplayer）（“setMedia”，{m4a:”http://www.jplayer.org/audio/m4a/TSP-01-Cro_magnon_man.m4a“}）；}，提供：“m4a”，wmode：“window”，smoothPlayBar:true，keyeenabled:true}）；

第二个文件工作不正常：

<!DOCTYPE html>

<head>
    <meta charset="utf-8" />
    <title>Test with link rel</title>

    <!-- ONLY DIFFERENCE IS THIS LINE -->
    <link rel="stylesheet" type="text/css" href="http://www.jplayer.org/latest/skin/blue.monday/jplayer.blue.monday.css" />
    <!-- END -->

</head>

<body>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<script type="text/javascript" src="http://www.jplayer.org/latest/js/jquery.jplayer.min.js"></script>

<div id="jquery_jplayer_1" class="jp-jplayer"></div>

<div id="jp_container_1" class="jp-audio">
    <div class="jp-type-single">
        <div class="jp-gui jp-interface">
            <ul class="jp-controls">
                <li><a href="javascript:;" class="jp-play" tabindex="1">play</a></li>
                <li><a href="javascript:;" class="jp-pause" tabindex="1">pause</a></li>
                <li><a href="javascript:;" class="jp-stop" tabindex="1">stop</a></li>
                <li><a href="javascript:;" class="jp-mute" tabindex="1" title="mute">mute</a></li>
                <li><a href="javascript:;" class="jp-unmute" tabindex="1" title="unmute">unmute</a></li>
                <li><a href="javascript:;" class="jp-volume-max" tabindex="1" title="max volume">max volume</a></li>
            </ul>
            <div class="jp-progress">
                <div class="jp-seek-bar">
                    <div class="jp-play-bar"></div>
                </div>
            </div>
            <div class="jp-volume-bar">
                <div class="jp-volume-bar-value"></div>
            </div>
            <div class="jp-time-holder">
                <div class="jp-current-time"></div>
                <div class="jp-duration"></div>

                <ul class="jp-toggles">
                    <li><a href="javascript:;" class="jp-repeat" tabindex="1" title="repeat">repeat</a></li>
                    <li><a href="javascript:;" class="jp-repeat-off" tabindex="1" title="repeat off">repeat off</a></li>
                </ul>
            </div>
        </div>
        <div class="jp-title">
            <ul>
                <li>Cro Magnon Man</li>
            </ul>
        </div>
        <div class="jp-no-solution">
            <span>Update Required</span>
            To play the media you will need to either update your browser to a recent version or update your <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>.
        </div>
    </div>
</div>

<script type="text/javascript">
    $("#jquery_jplayer_1").jPlayer({ready: function (event) {$(this).jPlayer("setMedia", {m4a:"http://www.jplayer.org/audio/m4a/TSP-01-Cro_magnon_man.m4a"});},supplied: "m4a",wmode: "window",smoothPlayBar: true,keyEnabled: true});
</script>

</body>

</html>

<!DOCTYPE html>

<head>
    <meta charset="utf-8" />
    <title>Test with jquery appendTo</title>
</head>

<body>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<script type="text/javascript" src="http://www.jplayer.org/latest/js/jquery.jplayer.min.js"></script>

<div id="jquery_jplayer_1" class="jp-jplayer"></div>

<div id="jp_container_1" class="jp-audio">
    <div class="jp-type-single">
        <div class="jp-gui jp-interface">
            <ul class="jp-controls">
                <li><a href="javascript:;" class="jp-play" tabindex="1">play</a></li>
                <li><a href="javascript:;" class="jp-pause" tabindex="1">pause</a></li>
                <li><a href="javascript:;" class="jp-stop" tabindex="1">stop</a></li>
                <li><a href="javascript:;" class="jp-mute" tabindex="1" title="mute">mute</a></li>
                <li><a href="javascript:;" class="jp-unmute" tabindex="1" title="unmute">unmute</a></li>
                <li><a href="javascript:;" class="jp-volume-max" tabindex="1" title="max volume">max volume</a></li>
            </ul>
            <div class="jp-progress">
                <div class="jp-seek-bar">
                    <div class="jp-play-bar"></div>
                </div>
            </div>
            <div class="jp-volume-bar">
                <div class="jp-volume-bar-value"></div>
            </div>
            <div class="jp-time-holder">
                <div class="jp-current-time"></div>
                <div class="jp-duration"></div>

                <ul class="jp-toggles">
                    <li><a href="javascript:;" class="jp-repeat" tabindex="1" title="repeat">repeat</a></li>
                    <li><a href="javascript:;" class="jp-repeat-off" tabindex="1" title="repeat off">repeat off</a></li>
                </ul>
            </div>
        </div>
        <div class="jp-title">
            <ul>
                <li>Cro Magnon Man</li>
            </ul>
        </div>
        <div class="jp-no-solution">
            <span>Update Required</span>
            To play the media you will need to either update your browser to a recent version or update your <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>.
        </div>
    </div>
</div>

<!-- ONLY DIFFERENCE IS THES LINES -->
<script type="text/javascript">
    $("#jquery_jplayer_1").jPlayer({ready: function (event) {$(this).jPlayer("setMedia", {m4a:"http://www.jplayer.org/audio/m4a/TSP-01-Cro_magnon_man.m4a"});},supplied: "m4a",wmode: "window",smoothPlayBar: true,keyEnabled: true});
    $('<link>', { rel: 'stylesheet', type: 'text/css', href: 'http://www.jplayer.org/latest/skin/blue.monday/jplayer.blue.monday.css' }).appendTo('head');
</script>
<!-- END -->

</body>

</html>


使用jqueryappendto进行测试













克罗马侬人

需要更新
要播放媒体，您需要将浏览器更新为最新版本，或更新浏览器。
$（“#jqueryjplayer_1”）.jplayer（{ready:function（event）{$（this.jplayer）（“setMedia”，{m4a:”http://www.jplayer.org/audio/m4a/TSP-01-Cro_magnon_man.m4a“}）；}，提供：“m4a”，wmode：“window”，smoothPlayBar:true，keyeenabled:true}）；
$（''，{rel:'stylesheet'，键入：'text/css'，href:'http://www.jplayer.org/latest/skin/blue.monday/jplayer.blue.monday.css","头"的附加物;；

样式表正在处理第二个文件，但只要您在播放器上单击某个内容，GUI就会混乱。为什么呢？我可以对提供的jPlayer样式表进行一些更改以使其与我的第二个示例一起工作吗？

这应该可以解决您的问题，加载CSS文件后调用插件：

$('<link>', {
    rel: 'stylesheet',
    type: 'text/css',
    href: 'http://www.jplayer.org/latest/skin/blue.monday/jplayer.blue.monday.css'
}).one('load', function () {
    $("#jquery_jplayer_1").jPlayer({
        ready: function (event) {
            $(this).jPlayer("setMedia", {
                m4a: "http://www.jplayer.org/audio/m4a/TSP-01-Cro_magnon_man.m4a"
            });
        },
        supplied: "m4a",
        wmode: "window",
        smoothPlayBar: true,
        keyEnabled: true
    });
}).appendTo('head');

$（“”{
rel:'样式表'，
键入：“text/css”，
href:'http://www.jplayer.org/latest/skin/blue.monday/jplayer.blue.monday.css'
}).1（'load'，function（）{
$（“#jquery_jplayer_1”）.jplayer({
就绪：功能（事件）{
$（this）.jPlayer（“setMedia”{
m4a:“http://www.jplayer.org/audio/m4a/TSP-01-Cro_magnon_man.m4a"
});
},
提供：“m4a”，
wmode：“窗口”，
smoothPlayBar：没错，
keydenabled:true
});
}).appendTo（“head”）；

尽管如此，在大多数情况下，这已经足够了：

$('<link>', { rel: 'stylesheet', type: 'text/css', href: 'http://www.jplayer.org/latest/skin/blue.monday/jplayer.blue.monday.css' }).appendTo('head');
$("#jquery_jplayer_1").jPlayer({ready: function (event) {$(this).jPlayer("setMedia", {m4a:"http://www.jplayer.org/audio/m4a/TSP-01-Cro_magnon_man.m4a"});},supplied: "m4a",wmode: "window",smoothPlayBar: true,keyEnabled: true});

$（“”，{rel:'stylesheet'，键入：'text/css'，href:'http://www.jplayer.org/latest/skin/blue.monday/jplayer.blue.monday.css","头"的附加物;；
$（“#jqueryjplayer_1”）.jplayer（{ready:function（event）{$（this.jplayer）（“setMedia”，{m4a:”http://www.jplayer.org/audio/m4a/TSP-01-Cro_magnon_man.m4a“}）；}，提供：“m4a”，wmode：“window”，smoothPlayBar:true，keyeenabled:true}）；

“我附上了这两个示例，它们可以在任何地方用于测试。”那么为什么不提供JSFIDLE链接呢？？？因为在JSFIDLE中，我不能一次包含整个html，我发现这在本例中很有用？可能是jPlayer css覆盖了您的自定义css。尝试深入了解jPlayer css以了解更多信息。这是不可能的，因为所有自定义JS和css都被排除在我提供的示例之外。在初始化jPlayer之前，您应该尝试附加（或前置）链接标记。顺便说一句，您可以在LINK-onload回调中初始化jPlayer，以防万一……第一个示例很有效，很好。你知道为什么要这样吗？第二个例子在FF和Chrome中不适用，即使它对我来说是有效的…@andreas我猜插件内部代码使用了一些特定的CSS值来正确解决。我不知道这个插件，所以我只是猜测。使用onload，您可以确定CSS文件已加载，因此应用了CSS规则。在文档准备就绪后追加脚本/链接，使其异步