和另一个HTML说 的 b.html
我创建了app.js
(并在b.html
)文件中使用,以便它(app.js
)加载a.css
和a.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>
});
});