Jquery load() a html file which contains JavaScript
I have a big dilema. I want to load a .html file which contains javascript(google maps) code to render the div inside it.
maps.html look like this :
<script type="text/javascript">
function getUrlVars()
{
var vars = [], hash;
var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
for(var i = 0; i < hashes.length; i++)
{
hash = hashes[i].split('=');
vars.push(hash[0]);
vars[hash[0]] = hash[1];
}
return vars;
}
</script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
//<![CDATA[
var hash = getUrlVars();
function load() {
var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(hash['lat'],hash['lng']),
zoom: 14,
mapTypeId: 'roadmap'
});
var infoWindow = new google.maps.InfoWindow;
downloadUrl("xmlout_carol.php", function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length+1; i++) {
var name = markers[i].getAttribute("nume");
var address = markers[i].getAttribute("adresa");
var type = markers[i].getAttribute("id");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var html = "<font face='Tahoma' style='font-size:12px;'><div style='min-width:230px;'><b>" + name + "</b> <br/>" + address +"<a target='_top' href='../statii.php?id=" + type + "'><img style='float:right; border:0px; margin-left: 40px;' src='go.png' /></a><div/></font>";
var tip = markers[i].getAttribute("tip");
var icon = customIcons[tip] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
icon: icon.icon,
// shadow: 'shaddow.png'
//shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
});
bindInfoWindow(marker, map, infoWindow, html);
}
});
}
function bindInfoWindow(marker, map, infoWindow, html) {
google.maps.event.addListener(marker, 'mouseover', function() {
infoWindow.setContent(html);
infoWindow.open(map, marker);
});
google.maps.event.addListener(map, 'click', function() {
infoWindow.close(map, marker);
});
}
function downloadUrl(url, callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;
request.onreadystatechange = function() {
if (request.r开发者_StackOverfloweadyState == 4) {
request.onreadystatechange = doNothing;
callback(request, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
function doNothing() {}
//]]>
</script>
<body onload="load()">
<div id="map" style="width: 900px; height: 500px"></div>
</body>
this script render the map to the div.map
What i want to do is to load this .html into a div that is contained in another .php file like this :
$("div#insert_here").load("maps.html?lat=xxx&long=yyy");
It output the div contained in maps.html but with no map no java.
So the question is... How do I load a .html file using jquery in another .php file if the .html file already contains javascripts to output data to the div in .html file ???
Thanks a lot !
Instead of loading a file which has both HTML and JavaScript in it, can you load the JavaScript with the page initially, make an ajax call for the HTML, and call the JavaScript once the ajax request is complete? This will solve a lot of headaches with this issue.
As the others said, load JS particularly, or do the eval() function ;).
That parses the JS and makes it possible to be executed initially.
I dont use load and get much it almost always seems better to use $.ajax or $.post (more flexibility, I also suggest calling json and using the dataType:"json". Again more flexible).
Use callbacks after success to run the javascript you need once the ajaxed html is loaded into the page. You call use beforeSend to load script you need (although unless there is a good reason just add those scripts to the page along with everything else (more robust/cacheable)).
If google_statii.js needs dynamic variables one way would be use hidden inputs on the page with values populated server side and then call them within the script.
ie. var x = $("input#myHiddenVariable");
加载中,请稍侯......
精彩评论