Reading a javascript variable and add to html iframe src
Question
In the below code I have 2 JavaScript variables long and lat
my challenge is to then being able to append those values to the end of the iframe URL
assistance in changes I need to make to the code below to allow me to achieve the above would be appreciated
The iframe code below i need to be able to replace the numeric values "-37.718821,145.064612" with the js variables lat long which the code below dynamically determines from the page url
<!DOCTYPE html>
<html>
<head>
<title>jQM Complex Demo</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script>
function gup(name) {
name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
var regexS = "[\\?&]" + name + "=([^&#]*)";
var regex = new RegExp(regexS);
var results = regex.exec(window.location.href);
if (results == null)
return "";
else
return results[1];
}
var latlong = (gup('q'));
var parts = latlong.split(",");
var lat = parts[0];
var long = parts[1];
</script>
</head>
<body>
<div data-role="page" id="map_display_Page">
<div data-role="header" id="myheader" data-position="fixed" style="background: #ffffff"></div>
<div data-role="header" id="myheader" data-position="fixed" style="color: #ffffff; background: #000033;">
<a href="#" data-role="button" data-rel="back" data-icon="back">Back</a>
<h1>Map Location</h1>
</div>
<div data-role="content">
<iframe src="maps1.html?q=-37.718821,145.064612" style="position:fixed; top:0px; left:0px; bottom:0px; right:0px; width:100%; height:100%; border:none; margin:0; padding:0; overflow:hidden;"></iframe> ---> </div>
<div data-role="footer" data-theme="a" data-position="fixed" data-id="myfooter" style="color: #ffffff; background: #000033;">
<div class="ui-bar">
<a href="sharedialog.html" data-role="button" data-icon="star" data-theme="a" data-rel="dialog">Share</a>
<a href="mailto:info@TrackingCentral.com.au?subject=Iphone App Enquiry" data-role="button" data-icon="plus" data-theme="a">Contact</a>
<a href="" data-role="button" data-icon="arrow-u" data-theme="a" style="float:right;" class="returnTopAction">Return top</a>
</div>
</div>
</div>
</body>
</html>
2 answers
solution1
0 2013-12-31 15:51:39
Try this:
$("iframe").attr("src", "maps1.html?q="+ lat +"," + long +");
This just changes the src attribute of the iframe and replaces it with your variables lat and long .
solution2
0 2013-12-31 16:00:32
Try this it should work
$(document).ready(function(){
$("iframe").attr("src","maps1.html?q="+lat+","+long);
});
Or
$("iframe").src="maps1.html?q="+lat+","+long;
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.