0

我有两页。为了解释起见，我将它们称为页面 A 和页面 B。当我在浏览器中打开页面 B 时，它会呈现所有样式和 jquery ui 代码正常工作，但是当我在页面 A 的 div 中打开页面 B 时，通过load() 方法，唯一呈现的是原始 html，没有样式，没有接口。问题是什么？正下方是 B 页的代码，最下面是 A 页的代码：

<!DOCTYPE html>
<html>

<head>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

  <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script> //jquery ui

  <link rel="stylesheet" href="http://spilot.koding.com/lbStyle.css"/>  //stylesheet

 <script src="http://www.parsecdn.com/js/parse-1.2.2.min.js"></script> //parse database

   <script>

$(function(){
    var crowd = ' ';
    var ageGroup = ' ';
    var activity = [];
    var scene = [];
    var neighborhood = [];
    var date = [];
    var details = [];
    var time = [];
   Parse.initialize("ivHLAO7z9ml1bBglUNuPSgcWabXe3UeE2yCgKM2x","gNeGt04lU7xcew893EvbEJ05qqc4POVhBsIBSCVj");

   $(".menu").menu({
        select: function (event, ui) {
            $('.selected', this).removeClass('selected');
        var selection = ui.item.addClass('selected').children('a').attr('name'); //add background color to selected menu item and get its attribute name
        var choice = ui.item.text(); //get text of menu selection


         if(selection == "ageGroup"){
        $("#ageGroup").text(choice); //change the text in the first <a> of ageGroup menu to ageGroup selection. 
        ageGroup = $("#ageGroup").text();
        }else{
         crowd = selection;
        }; 

        } // closes select function


    }); // closes menu
     $("button").click(function(){

var city = JSON.parse( localStorage.getItem('city') ); 
var niche = Parse.Object.extend(crowd);
var query = new Parse.Query(niche);
query.equalTo("ageGroup", ageGroup);
query.equalTo("city", city);
//query.include([activity.date.details.location.neighborhood.time])
query.find({
  success: function(results) {
    for (i = 0; i < results.length; i++){
    activity = results[i].get("activity");
    scene = results[i].get("location");
    neighborhood = results[i].get("neighborhood");
    date = results[i].get("date");
    details = results[i].get("details");
    time = results[i].get("time");

    };
  },
  error: function(error) {
    alert("Error: " + error.code + " " + error.message);
  }
});

//alert("working");

}); //closes click() 

}); // close function()
</script>
 <script>

$(function(){
 $( "button" ).button(); 

});
    </script>

</head>

  <body>



 <div id="div1">

         <button>Button label</button>


<div id="div2">
 <ul class="menu">
    <li>
        <a href="#" id="ageGroup">Age Group</a>
            <ul>
                <li><a href="#" name="ageGroup">18-21</a></li>
                <li><a href="#" name="ageGroup">21-30</a></li>
                <li><a href="#" name="ageGroup">30-40</a></li>
                <li><a href="#" name="ageGroup">40-50</a></li>
                <li><a href="#" name="ageGroup">50-60</a></li>
                <li><a href="#" name="ageGroup">60-70</a></li>
                <li><a href="#" name="ageGroup">70-80</a></li>
                <li><a href="#" name="ageGroup">80-90</a></li>
                <li><a href="#" name="ageGroup">90-100</a></li>
            </ul>

    </li>
    </ul>  

</div>   

<div id="div3">
        <ul class="menu" id="menu">
                <li><a href="#" name="academic_artStudies" id="academic_artStudies"><img src="" alt="" /><h2>Academic: Art Studies</h2></a></li>
                 <li><a href="#" name="academic_Literature"><img src="" alt="" /><h2>Academic: Literature</h2></a></li>
                <li><a href="#" name="academic_socialSciences"><img src="" alt="" /><h2>Academic: Social Sciences</h2></a></li>
                <li><a href="#" name="academic_physicalNaturalSci"><img src="" alt="" /><h2>Academic: Physical/Natural Sciences</h2></a></li>

  </ul>

</div>

</div>



</body>
</html>

 --------------//PAGE A//--------------
<!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

  <script>
$(function(){


$("#mainDiv").load("http://myURl.com/find2.html"); //this is where I call load()

});
</script>

</head>
<body>
       //this is the div where I want the other page to load

     <div id="mainDiv">

     </div> 


</body>
</html>
4

1 回答 1

1

由于您正在将页面“b”加载到页面“a”中，因此您需要在页面“a”标题中包含所有页面“b”样式表/js。

请注意，您正在将完整的 html 页面加载到页面“a”中，其中包括 html、header、body 并且这是不可取的，您应该使页面“b”成为仅包含您需要的标记的模板。

更新：

  1. 您将脚本嵌入到 html 中，这是一种不好的做法，将 JS 代码分隔到不同的文件中。
  2. 当您在文件中包含 JS 代码时，它会在页面加载后立即运行，因此如果您将“pageb”代码放入“pagea”中，它将在“pagea”加载后立即运行，并且当您加载“pageb”代码时不会再次运行。
  3. 您需要将“pageb”代码放入函数中，并仅在加载“pageb”内容后调用它。
于 2013-04-23T18:51:13.327 回答