使用iframe的jQuery冲突

Question

I have a parent html page whicg includes accordian JS file for my vertical menu. 我有一个父html页面，其中包括用于我的垂直菜单的Accordian JS文件。 Also I want to include a simple image slide show , JS file in it. 我还想在其中包含一个简单的图像幻灯片放映JS文件。 In order to avoid the jQuery conflict by including two JS files. 为了避免jQuery冲突，通过包含两个JS文件。 I have used I <frame> tag . 我用过<frame>标签。 Its works fine in all modern browsers perfectly. 它在所有现代浏览器中都能正常运行。 But in Internet Explorer 6. My image slide show doesn't work at all. 但是在Internet Explorer 6中。我的图像幻灯片放映根本不起作用。 here's my code. 这是我的代码。

<link type="text/css" rel="stylesheet" href="css/template.css">
<script type="text/javascript" language="javascript" src="js/jquery.js"></script>

<script type="text/javascript">
$(document).ready(function()
{
    //slides the element with class "menu_body" when paragraph with class "menu_head" is clicked 
    $("#firstpane p.menu_head").click(function()
    {
        $(this).css({backgroundImage:"url()"}).next("div.menu_body").slideToggle(300).siblings("div.menu_body").slideUp("slow");
        $(this).siblings().css({backgroundImage:"url()"});
    });

});
</script>

<style type="text/css">

}
.menu_list {    
    width:100%
}
.menu_head {
    padding: 0px 10px;
    cursor: pointer;
    position: relative;
    margin:1px;
    font-weight:bold;
    background: #fff url(left.png) center right no-repeat;
}
.menu_body {
    display:none;

}
.menu_body p{
  display:block;
  background-color:#fff;
  margin-top:0px;
  padding-left:10px;
  text-decoration:none;
}
.menu_body a:hover{
  color: #000000;
  text-decoration:underline;
  }
</style>
</head>
<body>
<table border="1" width="100%" cellspacing="0" cellpadding="0">
               <tr >
                    <td ><iframe src="simple_gallery.html" width="300px" height="250px" marginwidth="0" marginheight="0" hspace="0" vspace="0" frameborder="0" scrolling="No"></iframe></td>
              </tr>
              </table>
               <div id="firstpane" class="menu_list"> <!--Code for menu starts here-->
        <p class="menu_head">Header-1</p>
        <div class="menu_body">
        <a href="#">Link-1</a>
         <a href="#">Link-2</a>
         <a href="#">Link-3</a> 
        </div>
        <p class="menu_head">Header-2</p>
        <div class="menu_body">
            <a href="#">Link-1</a>
         <a href="#">Link-2</a>
         <a href="#">Link-3</a> 
        </div>
        <p class="menu_head">Header-3</p>
        <div class="menu_body">
          <a href="#">Link-1</a>
         <a href="#">Link-2</a>
         <a href="#">Link-3</a>         
       </div>
  </div>

iframe link page contents : iframe链接页面内容：

<link rel="stylesheet" type="text/css" href="css/simple_slider.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<script type="text/javascript" src="JS/simplegallery.js"></script>
<script type="text/javascript">
var mygallery=new simpleGallery({
    wrapperid: "simplegallery1", //ID of main gallery container,
    dimensions: [300,250], //width/height of gallery in pixels. Should reflect dimensions of the images exactly
    imagearray: [
        ["images/img-2.jpg", "#", "_new", "There's nothing like a nice swim in the Summer."],
        ["images/img-1.jpg", "#", "", ""],
        ["images/r-tata.jpg", "", "", "Eat your fruits, it's good for you!"],
        ["images/inside-image1.jpg", "", "", ""]
    ],
    autoplay: [true, 2500, 5], //[auto_play_boolean, delay_btw_slide_millisec, cycles_before_stopping_int]
    persist: false, //remember last viewed slide and recall within same session?
    fadeduration: 500, //transition duration (milliseconds)
    oninit:function(){ //event that fires when gallery has initialized/ ready to run
        //Keyword "this": references current gallery instance (ie: try this.navigate("play/pause"))
    },
    onslide:function(curslide, i){ //event that fires after each slide is shown
        //Keyword "this": references current gallery instance
        //curslide: returns DOM reference to current slide's DIV (ie: try alert(curslide.innerHTML)
        //i: integer reflecting current image within collection being shown (0=1st image, 1=2nd etc)
    }
})
</script>
<style type="text/css">

}
.menu_list {    
    width:100%
}
.menu_head {
    padding: 0px 10px;
    cursor: pointer;
    position: relative;
    margin:1px;
    font-weight:bold;
    background: #fff url(left.png) center right no-repeat;
}
.menu_body {
    display:none;

}
.menu_body p{
  display:block;
  background-color:#fff;
  margin-top:0px;
  padding-left:10px;
  text-decoration:none;
}
.menu_body a:hover{
  color: #000000;
  text-decoration:underline;
  }
</style>
<div id="simplegallery1"></div>

Answer 1

Instead of using a iFrame to stop a jQuery conflict can't you just use noConflict with jquery? 与其使用iFrame来停止jQuery冲突，还不可以将noConflict与jquery noConflict使用吗？ Have a look at the documentation 看一下文档

使用iframe的jQuery冲突

问题描述

1 个解决方案

解决方案1
1 2012-07-21 11:24:00

使用iframe的jQuery冲突

问题描述

1 个解决方案

解决方案1 1 2012-07-21 11:24:00

解决方案1
1 2012-07-21 11:24:00