访问加载到另一个html文件中的html文件

时间:2014-01-19 12:04:26

标签: javascript jquery html css web-applications

我已经说过了 a.html a.css

和另一个HTML说 的 b.html

我创建了app.js(并在b.html)文件中使用,以便它(app.js)加载a.cssa.html并使用脚本制作一些对a.html和b.html的内容进行操作,但该脚本仅适用于b.html。所以请帮我解决这个问题

谢谢... 我还有一个问题要问这是否已经解决。

a.html

    <html>
<head>
 </head>
 <body>
 <div id="container">
  <div class="page">
      <p>click me</p>
      <p>click me too..</p>
      <p>click y not me....</p>
  </div>
  <div class="messages">
      <p id= "msg">messages here</p>
  </div>
 </div>
 </body>
</html>

b.html

    <html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<style>
#example-widget-container { height: 500px; width: 500px; border: 1px solid black; }
</style>
</head>
<body>
<p>If you click on me, I will disappear.</p>
<p>Click me away!</p>
<p>Click me too!</p>
  <p>hi.... this is my widget</p></br>
  <script src="app.js" type="text/javascript"></script>
  <div id="example-widget-container"></div>
 </body>
</html>

app.js

    (function() {

// Localize jQuery variable
var jQuery;

/******** Load jQuery if not present *********/
if (window.jQuery === undefined || window.jQuery.fn.jquery !== '1.10.2') {
    var script_tag = document.createElement('script');
    script_tag.setAttribute("type","text/javascript");
    script_tag.setAttribute("src","http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js");
    if (script_tag.readyState) {
      script_tag.onreadystatechange = function () { // For old versions of IE
          if (this.readyState == 'complete' || this.readyState == 'loaded') {
              scriptLoadHandler();
          }
      };
    } else {
      script_tag.onload = scriptLoadHandler;
    }
    // Try to find the head, otherwise default to the documentElement
    (document.getElementsByTagName("head")[0] || document.documentElement).appendChild(script_tag);
} else {
    // The jQuery version on the window is the one we want to use
    jQuery = window.jQuery;
    main();
}

/******** Called once jQuery has loaded ******/
function scriptLoadHandler() {
    // Restore $ and window.jQuery to their previous values and store the
    // new jQuery in our local jQuery variable
    jQuery = window.jQuery.noConflict(true);
    // Call our main function
    main(); 
}

/******** Our main function ********/
function main() 
{ 
    jQuery(document).ready(function($) { 
        /******* Load CSS *******/
        var css_link = $("<link>", { 
            rel: "stylesheet", 
            type: "text/css", 
            href: "a.css" 
        });
        css_link.appendTo('head');          

        /******* Load HTML *******/
        $('#example-widget-container').load("a.html");

    });
}
})(); // We call our anonymous function immediately

$(document).ready(function(){
  $("p").click(function(){
    alert($(this).html()); //displays text inside <p></p>
  });
}); 

0 个答案:

没有答案