同一页面上的多个Jquery脚本发生冲突

时间:2013-12-06 05:41:07

标签: javascript jquery html5

好的,我在这个主题上看到了几个问题 - 我有一个html5页面,我正在尝试应用音乐流播放器,但jquery脚本与另一个jquery脚本冲突。

我的代码如下,我尝试过无冲突方法,但无济于事我可能会错误地应用它。这只是我的代码的脚本部分我也有视频库播放;画廊播放很好,但播放器显示但根本不播放。每次我加载页面时,我都会收到一条消息:Adobe Flash Player安全性null正在尝试连接基于互联网的位置webservinghosting.ca(我正在从该站点流式传输站点)。

<script type="text/javascript" src="style/js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="style/js/jquery.aw-showcase.js"></script>
<script type="text/javascript" src="style/js/jquery.superbgimage.min.js"></script>
<script type="text/javascript" src="style/js/jquery.slickforms.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery /1.6/jquery.min.js"></script>   

<script type="text/javascript">
//create this naming for Jquery 1.3.2 version
var jq_1_6 = $.noConflict(true);
</script> 

<script type="text/javascript">
jQuery(document).ready(function($){
$('.forms').dcSlickForms();
});
</script>

<script type="text/javascript">

$(document).ready(function()
{
$("#showcase").awShowcase(
{
    content_width:          900,
    content_height:         400,
    auto:                   true,
    interval:               3000,
    continuous:             false,
    arrows:                 true,
    buttons:                true,
    btn_numbers:            true,
    keybord_keys:           true,
    mousetrace:             false, /* Trace x and y coordinates  for the mouse */
    pauseonover:            true,
    stoponclick:            false,
    transition:             'fade', /* hslide/vslide/fade */
    transition_delay:       0,
    transition_speed:       500,
    show_caption:           'onload' /* onload/onhover/show */
});
});

</script>

<link type="text/css" href="http://www.websavershosting.ca/jplayer/skin/jplayer.websavers.css" rel="stylesheet" />
<script type="text/javascript" src="http://www.websavershosting.ca/jplayer/jquery.jplayer.min.js"></script>
<script language="javascript" type="text/javascript" src="https://fennel.websavers.ca:2199/system/streaminfo.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">
<div id="jp-album-art">
    <img id="cc_strinfo_trackimageurl_wlezfm" class="cc_streaminfo" />
</div>
<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-mute" tabindex="1" title="mute">mute</a></li>
  <li><a href="javascript:;" class="jp-unmute" tabindex="1" title="unmute">unmute</a></li>
</ul>
<div class="jp-volume-bar">
  <div class="jp-volume-bar-value"></div>
</div>
</div>
<div class="jp-title"><span id="cc_strinfo_summary_wlezfm" class="cc_streaminfo">Loading Track ...</span></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(document).ready(function(){
jQuery("#jquery_jplayer_1").jPlayer({
  ready: function () {
    jQuery(this).jPlayer("setMedia", {
      mp3: "http://209.172.54.130:9025/;stream/1"
    });
  },
  swfPath: "http://www.websavershosting.ca/jplayer/Jplayer.swf",
  supplied: "mp3",
  solution: navigator.userAgent.indexOf("Trident/6")>-1 ? "flash" : "html,flash"
});
});
</script>

2 个答案:

答案 0 :(得分:6)

您正在使用两次jQuery文件导致问题。

尝试删除最后一个:

<script type="text/javascript" src="style/js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="style/js/jquery.aw-showcase.js"></script>
<script type="text/javascript" src="style/js/jquery.superbgimage.min.js"></script>
<script type="text/javascript" src="style/js/jquery.slickforms.js"></script>

如果您需要在同一页面上使用多个文件。

<script type="text/javascript" src="jquery-1.1.3.js"></script>
<script> $113 = jQuery.noConflict(true);</script>
<script type="text/javascript" src="jquery-1.6.2.js"></script>

现在要访问版本1.1.3,您需要使用$113之类的

$113('.element').val();

虽然版本1.6.2为$

答案 1 :(得分:1)

试试这个:

如果您有更多jquery脚本:

<script  src="../jquery-1.9.1.min.js"></script> 
<script type="text/javascript">
var first= $.noConflict(true);
</script>

<!-- load jQuery 1.4.2 -->
<script type="text/javascript" src="../jquery-1.2.2.js"></script>
<script type="text/javascript">
var second= $.noConflict(true);
</script>