How to prevent jquery from removing the <script> tags
How do I prevent the default behaviour of jquery stripping out my JS?
function callBackFunctionLoadPage(data)
{
var data = $(data).find('#content');
alert($(data).html());
$("#content").html(data);
$("#page").fadeTo(100,1);
}
function loadPage(url,parm)
{
//alert(url);
loadNextBackInPage_URL = url;
$("#page").fadeTo(100,.2);
$.post(url,parm,callBackFunctionLoadPage);
}
In my code I want the tags but jquery strips them out:
Original code:
<div id="content">
<div class="post">
<h1 class="title"><a href="#">Kannada on campus</a> - photos</h1>
<p class="meta"> </p>
<div class="entry">
<p> </p>
<div id="gallery">
<img src="images/gallery/daya_240909_byreg1.jpg">
<img src="images/gallery/Group 2.jpg">
<img src="images/gallery/IMG00216-20101025-2001.jpg">
<img src="images/gallery/kamal-hassan-in-kannada-02.jpg">
<img src="images/gallery/kannada2.jpg">
<img src="images/gallery/Nayantara-Kannada.jpg">
<img src="images/gallery/P1019502.jpg">
<img src="images/gallery/P1019603.jpg">
<img src="images/gallery/P1019643.jpg">
<img src="images/gallery/P1019644.jpg">
<img src="images/gallery/Zee-Kannada-Presents-Rajotsava.jpg">
</div>
<script src="galleria/galleria-1.2.3.min.js"></script>
<script>
Galleria.loadTheme('galleria/themes/classic/galleria.classic.min.js');
$("#gallery").galleria({
width: 500,
height: 500
});
</script>
</div>
<p class="links"> </p>
</div>
</div>
<!-- end content -->
But From jquery:
<div id="content">
<div class="post">
<h1 class="title"><a href="#">Kannada on campus</a> - photos</h1>
<p class="meta"> </p>
<div class="entry">
<p> </p>
<div id="gallery">
<img src="images/gallery/daya_240909_byreg1.jpg">
<img src="images/gallery/Group 2.jpg">
<img src="images/gallery/IMG00216-20101025-2001.jpg">
<img src="images/gallery/kamal-hassan-in-kannada-02.jpg">
<img src="images/gallery/kannada2.jpg">
<img src="images/gallery/Nayantara-Kannada.jpg">
<img src="images/gallery/P1019502.jpg">
<img src="images/gallery/P1019603.jpg">
<img src="images/gallery/P1019643.jpg">
<img src="images/gallery/P1019644.jpg">
<img src="images/gallery/Zee-Kannada-Presents-Rajotsava.jpg">
</div>
</div>
<p class="links"> </p>
</div>
</div>
<!-- end content -->
EDIT
Here is my actual html page that's getting loaded
<!DOCTYPE>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Kannada on campus</title>
<meta name="keywords" content="" />
<link rel="icon" href="images/icon.jpg"/>
<meta name="description" content="" />
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript" src="js/custom.js"></script>
</head>
<div id="box"><a href="http://twitter.com/bedupako" target="_blank"><img src="images/twitter.png" width="50" height="50" alt="Follow us on twitter" longdesc="http://twitter.com/bedupako" border="0" /></a> <a href="http://www.youtube.com/user/Bedupako" target="_blank"><img src="images/youtube.png" width="50" height="50" alt="Follow us on twitter" longdesc="http://www.youtube.com/user/Bedupako" border="0" /></a> <a href="http://www.facebook.com/pages/BEDUPAKO/301073813491?ref=ts" target="_blank"><img src="images/Facebook Product Profile.png" width="50" height="50" alt="Follow us on twitter" longdesc="http://www.facebook.com/pages/BEDUPAKO/301073813491?ref=ts" border="0" /></a> <a href="http://www.orkut.com/Community?cmm=98290522" target="_blank"><img src="images/orkut.png" width="50" height="50" alt="Follow us on twitter" longdesc="http://www.orkut.com/Community?cmm=98290522" border="0" /></a>
<!--end box-->
</div>
<body>
<!-- start header -->
<div id="header">
<div id="search"></div>
</div>
<div id="logo">
<h1><a href="#">Kannada on campus</a></h1><br /><br />
<h2>Kannada kali, uddaraaagi. Baai muchhikondu bhashe maatadi.</h2>
</div>
<!-- end header -->
<hr />
<!-- start page -->
<div id="page">
<div id="menu">
<ul>
<li><a href="?p=ho" onclick="javascript:loadPage('?p=ho',null);return false;">Home</a></li>
<li><a href="?p=e" onclick="javascript:loadPage('?p=e',null);return false;">Events</a></li>
<li><a href="?p=ph" onclick="javascript:loadPage('?p=ph',null);return false;">Photos</a></li>
<li><a href="?p=ab" onclick="javascript:loadPage('?p=ab',null);return false;">About</a></li>
<li><a href="?p=cu" onclick="javascript:loadPage('?p=cu',null);return false;">Contact Us</a></li>
<li><a href="other_files/change_lang.php?l=k&r=%2Fkoc%2F%3Fp%3Dph">ಕನ್ನಡ</a></li>
</ul>
</div> <!-- start content -->
<div id="content">
<div class="post">
<h1 class="title"><a href="#">Kannada on campus</a> - photos</h1>
<p class="meta"> </p>
<div class="entry">
<p> </p>
<div id="gallery">
<img src="images/gallery/daya_240909_byreg1.jpg">
<img src="images/gallery/Group 2.jpg">
<img src="images/gallery/IMG00216-20101025-2001.jpg">
<img src="images/gallery/kamal-hassan-in-kannada-02.jpg">
<img src="images/gallery/kannada2.jpg">
<img src="images/gallery/Nayantara-Kannada.jpg">
<img src="images/gallery/P1019502.jpg">
<img src="images/gallery/P1019603.jpg">
<img src="images/gallery/P1019643.jpg">
<img src="images/gallery/P1019644.jpg">
<img src="images/gallery/Zee-Kannada-Presents-Rajotsava.jpg">
</div>
<script src="galleria/galleria-1.2.3.min.js"></script>
<script>
Galleria.loadTheme('galleria/themes/classic/galleria.classic.min.js');
$("#gallery").galleria({
width: 500,
height: 500
});
</script>
</div>
<p class="links"> </p>
</div>
</div>
<!-- end content -->
<!-- start sidebar two -->
<div id="sidebar2" class="sidebar">
<ul>
<li>
<h2><a href="?p=ev">Register you event</a></h2>
Tell us if you are conducting any kannada event and we will update it to our audience!
</li>
<li>
<h2>Subscription</h2>
<form id="form1" method="post" action="other_files/add_mailing_list.php">
<label>
Subscribe to our mailing list:
<input type="text" name="sub-email" id="sub-email" />
<input type="submit" name="submit" id="submit" value=" Add " />
<input type="hidden" name="redirect" id="redirect" value="%2Fkoc%2F%3Fp%3Dph" />
</label>
开发者_StackOverflow </form>
<h2>Current Events</h2>
<ul>
</ul>
<h2>archives</h2>
<ul>
<li><a href="?p=de&id=1">test</a></li>
</ul>
</li>
</ul>
</div>
<!-- end sidebar two -->
<div style="clear: both;"> </div>
</div>
<!-- end page -->
<hr />
<!-- start footer -->
<div id="footer">
<p>©2011 All Rights Reserved. • Designed by <a href="http://ajitah.com/" target="_blank">Ajitah</a> | <a href="humans.txt">humans.txt</a></p>
</div>
<!-- end footer --></body>
</html>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-23549810-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
I suggest you do things differently. Firstly, ajax calls are good because they're lightweight, so instead of loading a whole page, you can just grab the updated data and inject it where necessary. If you're getting a giant set of markup including scripts you're essentially using ajax to do a normal http page request. That's like looking at the fast line in the supermarket (10 items or less) and seeing it move faster than the isle you're currently standing in, so you move there. But if you do that for every request, you end up turning the fast lane into a normal lane.
Getting javascript code from the server to execute is usually a sign that you're not thinking correctly about the problem, since your mixing domains horribly.
Firstly, why not just have a function that executes every time you ajax the next page/gallery in? Why do you need to get the code from the server? In accordance with my first point, why not just get an array of new filenames and build the new gallery from those?
If for some reason you feel you want to continue this way anyway (I should point out at this point that executing code in such a manner is not just bad practise but unsafe in certain circumstances), you can extract the code and eval it:
Assuming there's only one block of code, and it's wrapped in <script></script> (which is not taking into account all sorts of whitespace and funny characters):
function callBackFunctionLoadPage(data)
{
...
eval(data.match(/<script>(.*)<\/script>/im)[1]);
}
UPDATE
jquery strips out the javascript but it still executes it:
$('#content').html('<div><script>alert("hello, world!");</script></div>');
So there is almost no reason to want the script tags themselves if their content is already executed...
UPDATE 2 (for non-believers)
var scriptDiv = $('<div><span></span><script>alert("boom!");</script></div>');
alert("not yet"); // the above is created but not executed until added to the DOM
$('body').append(scriptDiv); // there you go, proof that it is executed
alert(scriptDiv.html()); // to prove that the script was stripped
Have you tried using JS's native innerHTML ?
$("#content").get(0).innerHTML = data;
If this works, as davin pointed out, you still have to evaluate the scripts:
eval(data.match(/<script>(.*)<\/script>/im)[1]);
Loading and evaluating SCRIPT form AJAX should work in general.
加载中,请稍侯......
精彩评论