I have embedded a page in a <iframe> as follows :
<iframe id = 'iframeid'
src="/qgis/index.html"
scrolling="no"
frameborder="0"
style="height: 100vh;
width: 100%"
onload="on_load(this)">
</iframe>
And here is the on_load function called once the iframe is loaded.
<script type="text/javascript">
function on_load(iframe) {
try {
var lat = -0.017;
var lng = 0.015;
var zoom = 16;
var map = document.getElementById("iframeid").contentWindow.map;
map.setView([lat, lng], zoom);
} catch (e) {
// This can happen if the src of the iframe is
// on another domain
alert('exception: ' + e);
}
}
</script>
My problem is that the <iframe> enters a loop and the page is loaded once again, inside the <iframe>, and it goes like this indefinitely.
If you have the possibility to use jQuery you might try to change your function "onload" with :
$('document').ready(function(){
try {
var lat = -0.017;
var lng = 0.015;
var zoom = 16;
var map = document.getElementById("iframeid").contentWindow.map;
map.setView([lat, lng], zoom);
} catch (e) {
// This can happen if the src of the iframe is
// on another domain
alert('exception: ' + e);
}
});
Because I'm wondering if your script is triggering the onload while it's still not ready.
I have tried your code and added a line befor your javascript
try it :
<iframe id = 'iframeid'
src="home.html"
scrolling="no"
frameborder="0"
style="height: 100vh;
width: 100%"
onload="on_load(this)">
</iframe>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
function on_load(iframe) {
try {
var lat = -0.017;
var lng = 0.015;
var zoom = 16;
var map = document.getElementById("iframeid").contentWindow.map;
map.setView([lat, lng], zoom);
} catch (e) {
// This can happen if the src of the iframe is
// on another domain
alert('exception: ' + e);
}
}
</script>
Related
I have a panorama video that was created with a commercial product. I would like to scale the video to fit the browser width. The code in the web inspector is:
<body leftmargin="0" topmargin="0" rightmargin="0" bottommargin="0" onload="pageInit();">
<script type="text/javascript" src="swfobject.js"></script>
<div id="flashcontent" width="1921" height="540>
To view virtual tour properly, Flash Player 9.0.28 or later version is needed.
Please download the latest version of <a href=" http:="" www.adobe.com="" go="" getflashplayer"="" target="_blank">
<embed type="application/x-shockwave-flash" src="twviewer.swf" style="undefined" id="sotester" name="sotester" bgcolor="#FFFFFF" quality="high" allownetworking="all" allowscriptaccess="always" allowfullscreen="true" scale="noscale" wmode="direct" flashvars="lwImg=&lwBgColor=0,255,255,255&lwBarBgColor=255,255,255,255&lwBarColor=255,0,255,0&lwBarBounds=1072,270,0,0&lwlocation=0&lwShowLoadingPercent=true&lwTextColor=255,0,0,0&buildSN=7.98.151110&iniFile=config_A303_Pano.bin&progressType=1&swfFile=&percentType=0&sizeFile=&href=http://caboleisure.com/panoramas/A303_Pano_Auto/_auto/flash/Tourweaver_A303_Pano.html&lwbounds=<!-%% videobounds %%->" height="540" width="1921">
</div>
<script type="text/javascript">
var jsReady = false;
function isJsReady() {
return jsReady;
}
function pageInit() {
jsReady = true;
}
function thisMovie(movieName) {
return document.getElementById(movieName);
}
function changeSceneOnLoad() {
var search = window.location.search;
var s = search.substring(1);
var arr = s.split("&");
var json = {};
for(var i = 0; i < arr.length; i++) {
var str = arr[i];
var key = str.split("=")[0];
var value = str.split("=")[1];
json[key.toLowerCase()] = value;
}
var firstValue = json['firstscene'];
var panoid = decodeURI(firstValue);
if(panoid != "undefined") {
if(thisMovie("sotester").twAPI) {
setTimeout(function() {
thisMovie("sotester").twAPI("switchToScene", panoid);
}, 500);
} else {
setTimeout(changeSceneOnLoad, 1000);
}
}
}
// <![CDATA[
var so = new SWFObject("twviewer.swf", "sotester", "1921", "540", "9.0.0", "#FFFFFF");
so.addParam("allowNetworking", "all");
so.addParam("allowScriptAccess", "always");
so.addParam("allowFullScreen", "true");
so.addParam("scale", "noscale");
so.addParam("wmode", "direct");
//<!-%% Share Mode %%->
so.addVariable("lwImg", "");
so.addVariable("lwBgColor", "0,255,255,255");
so.addVariable("lwBarBgColor", "255,255,255,255");
so.addVariable("lwBarColor", "255,0,255,0");
so.addVariable("lwBarBounds", "1072,270,0,0");
so.addVariable("lwlocation", "0");
so.addVariable("lwShowLoadingPercent", "true");
so.addVariable("lwTextColor", "255,0,0,0");
so.addVariable("buildSN", "7.98.151110");
so.addVariable("iniFile", "config_A303_Pano.bin");
so.addVariable("progressType", "1");
so.addVariable("swfFile", "");
so.addVariable("percentType", "0");
so.addVariable("sizeFile", "");
so.addVariable("href", location.href);
so.addVariable("lwbounds", "<!-%% videobounds %%->");
so.write("flashcontent");
changeSceneOnLoad();
// ]]>
</script>
</body>
A url for the page is here: Panorama
I've tried a few suggestions, like the one described here:
Preserving aspect ratio for embedded iframes
but that doesn't work. I am actually using this page as an embedded iframe from another page, but if I can get his page to scale correctly that isn't a problem. Any suggestions would be appreciated.
Check if you've dimension properties like width, height. Set them to enlarge your screen
I am currently displaying "LOADING STREET VIEW" while the image is loading. If it cannot find an image for the coordinate, I am popping up a dialog stating "Unable to load location in street view". I want to alter this so that I am not popping a dialog, but instead changing the LOADING STREET VIEW element to the image found at : https://maps.googleapis.com/maps/api/streetview?size=600x300&location=44.414382,11.013988&heading=151.78&pitch=-0.76 I'm very confused about referencing html elements in javascript code. From the research i've done, I think I need to be using document in my javascript code. All help is appreciated and you can find the code below:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script type="text/javascript">
function initialize() {
var markerPosition = new google.maps.LatLng(41.201316987470086, -82.98099300983233);
var panoramaOptions = {
position: markerPosition,
pov: {
heading: 165,
pitch: 0,
zoom: 1
}
};
var myPano = new google.maps.StreetViewPanorama(document.getElementById("pano"), panoramaOptions);
myPano.setVisible(false);
new google.maps.Marker({map: myPano, position: markerPosition, title: 'Feature'});
// add a variable that gets set when the position_changed handler gets fired off
var positionDidChange = false;
var newPov = {};
var listenerHandle = google.maps.event.addListener(myPano, 'position_changed', function () {
positionDidChange = true;
google.maps.event.removeListener(listenerHandle);
newPov.heading = google.maps.geometry.spherical.computeHeading(myPano.getPosition(), markerPosition);
newPov.pitch = 0;
newPov.zoom = 1;
myPano.setPov(newPov); myPano.setVisible(true);
});
// add a function that gets fired off to see if the position did change so that the user does not wait forever
setTimeout(function () {
if (!positionDidChange) {
alert("Unable to load location in street view");
}
}, 5000);
}
</script>
</head>
<body onload="initialize()">
<div id="pano" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0;"> LOADING STREET VIEW...</div>
</body>
</html>
You can control that text with document.getElementById('pano').innerHTML, for instance:
document.getElementById('pano').innerHTML = ' LOADING STREET VIEW..'; // what you have now
document.getElementById('pano').innerHTML = ''; //empty
Make a function that will replace the inner HTML of the div to the image:
var changeImage = function(){
var image = "http://www.myimage.com/image.png";
document.getElementById("pano").innerHTML = "<img src='" + image + "'>";
}
Then
if(!positionDidChange){
changeImage();
}
I have an iframe on a document. Using javascript, I can get the iframe's width and height and the document's width and height. I now need to get the x,y position of the iframe on the document from within the iframe.
Code is something like:
<html>
<iframe>
var documentWidth = parent.window.innerWidth;
var documentHeight = parent.window.innerHeight;
var iframeWidth = window.innerWidth;
var iframeHeight = window.innerHeight;
var iframeX = ????
</iframe>
<html>
I've tried window.offsetTop/Left, parent.window.offsetTop/Left, window.clientTop, etc and anything else I can find but keep getting 'undefined'.
Both are on the same server so I don't think I have a cross domain issue.
Any ideas?
BTW I can't use JQuery for this. JS Only.
Here is a bit more detail:
<html>
<body>
<div>
<iframe name="iframe/123/Test">
<html>
<body>
<script src="same domain"></script>
</body>
</html>
</iframe>
</div>
</body>
</html>
The script looks like this so far:
// JavaScript Document
var documentWidth = parent.window.innerWidth;
var documentHeight = parent.window.innerHeight;
var iframeWidth = window.innerWidth;
var iframeHeight = window.innerHeight;
var iframeName = window.name;
var iframeX = window.parent.document.getElementsByName(iframeName).offsetLeft;
//Var Dumps
document.write("Document Width: "+documentWidth+"<br>");
document.write("Document Height: "+documentHeight+"<br>");
document.write("Iframe Width: "+iframeWidth+"<br>");
document.write("Iframe Height: "+iframeHeight+"<br>");
document.write("Iframe X: "+iframeX+"<br>");
I get the following results on page in the iframe:
Document Width: 1566
Document Height: 652
Iframe Width: 300
Iframe Height: 250
Iframe X: undefined
Since both files are on same server, so you dont have cross domain issue, You can try following solution:
Main Html
<html>
<body>
<iframe src='iframe.html' name='iframe_name' id='iframe_id'></iframe>
</body>
</html>
Iframe Code [iframe.html]:
<html>
<body>
<script type="text/javascript">
var documentWidth = parent.window.innerWidth;
var documentHeight = parent.window.innerHeight;
var iframeWidth = window.innerWidth;
var iframeHeight = window.innerHeight;
// Get Left Position
var iframeX = window.parent.document.getElementById('iframe_id').offsetLeft;
// Get Top Position
var iframeY = window.parent.document.getElementById('iframe_id').offsetTop;
</script>
</body>
</html>
window.parent.document.getElementsByTagName('iframe') will reference every iframe in the parent's window. From there you can find your specific iframe by looping through and checking the src attribute.
Once you have your iframe, you can get it's dimensions and locations with the properties from element.getBoundingRect().
var iframes = window.parent.document.getElementsByTagName('iframe');
var yourURL = 'test.com';
var iframe;
for (var i = 0; i < iframes.length; i++) {
if (iframes[i].src == 'test.com') {
iframe = iframes[i];
break;
}
}
var rect = iframe.getBoundingClientRect();
I'm loading an iframe into a div on a page. If I use this it works fine:
<iframe src="http://myURL.com/embed/whatever/1213" id="frameID" frameBorder="0" width="100%" style="overflow:hidden"></iframe>
<script>
window.addEventListener( "message",
function (e) {
var frameHeight = e.data.height;
document.getElementById('frameID').height=frameHeight + "px";
},
false
);
</script>
But, I'd rather a total javascript solution so I use the following, but it loads the iframe at the end of the page instead of in the div as above.
<script>
var iframe = document.createElement('iframe');
document.body.appendChild(iframe);
iframe.src = 'http://myURL.com/embed/whatever/1213';
iframe.width = '100%';
iframe.id = 'frameID';
iframe.frameBorder = '0';
iframe.style = 'overflow:hidden';
window.addEventListener( "message",
function (e) {
var frameHeight = e.data.height;
alert(frameHeight);
document.getElementById('frameID').height=frameHeight + "px";
},
false
);
</script>
Why would it do that?
By using document.body.appendChild() you're appending it as a child of body.
Does the div have an id attribute? If you you could use:
document.getElementById('id-of-div').appendChild(iframe);
Does this help?
Well I am coding a little game with js using a HTML5 canvas. I got the canvas and the tag in a html file and the javascript in a seperate file called java.js.
I got some alerts at some moment in the script to find out if it runs when I load the html into my browser. Problem is it does not show any of these and the javascript doesnt load.
The weirdest is what firebug does: Under "HTML" it shows me the full script when I click the tag, but under "Script" it tells me there is no javascript on the page.
Help?
my html:
<body><canvas id="canvas" width="1000px" height="500px" style="border:1px solid #c3c3c3;">text</canvas>
<script type="text/javascript" src="java.js">
</script></body>
When I put the script tag in the head:
<head><script type="text/javascript" src="java.js">
</script></head>
<body><canvas id="canvas" width="1000px" height="500px" style="border:1px solid #c3c3c3;">text</canvas>
</body>
my js:
alert('define');
var scrollx=0,
scrolly=0,
keyID=0,
global = {};
global.players=[];
global.playermap=[];
var c=document.getElementById("canvas"),
ctx=c.getContext('2d');
alert('init');
function pony (x,y, hspd, vspd) {
alert("pony created!");
this.x = x;
this.y = y;
this.vsp = vspd;
this.hspd = hspd;
this.image = new Image();
this.image.src = "alien.png";
this.framenumber = 11;
this.frameactual = 1;
this.framespeed=0.8;
this.frametime =50;
this.framewidth = this.image.width / this.framenumber;
this.frameheight = this.image.height;
this.colorbody="#000000";
//
this.nextframe = function() {
this.frameactual=this.frameactual+this.framespeed;
if (Math.round(this.frameactual)>this.framenumber){this.frameactual=1;}
this.draw();
};
//
this.draw = function() {
this.frame=Math.round(this.frameactual);
ctx.drawImage(this.image,(this.frame-1)*this.framewidth,0,this.framewidth,this.image.height,this.x-scrollx-(this.framewidth/2),this.y-scrolly-(this.image.height/2),this.framewidth,this.image.height);
};
//
//var _this=this;
//this.frametimer=setInterval(function(){_this.nextframe();},this.frametime);
alert("time set");
}
//
function setpos_player(id,x,y,hspd,vspd){
alert("this");
if (typeof(global.playermap[id])=="undefined"){
global.players.push(new pony (x,y, hspd, vspd));
global.playermap[id]=global.players.length;}
else{
global.players[global.playermap[id]].x=x;
global.players[global.playermap[id]].y=y;
global.players[global.playermap[id]].hspd=hspd;
global.players[global.playermap[id]].vspd=vspd;}
}
//
function clear(){
ctx.fillStyle = "#FFFFFF";
ctx.beginPath();
ctx.rect(0,0,1000,1000);
ctx.closePath();
ctx.fill();}
document.onkeypress = KeyCheck;
document.onkeydown = KeyCheck;
document.onkeyup = KeyRelease;
function KeyCheck(e)
{
keyID = (window.event) ? event.keyCode : e.keyCode;
}
function KeyRelease(e)
{keyID=0;}
//
function step(){
clear();
for (var i = 0; i < global.players.length; i++) {
_this=global.players[i];
_this.y+=_this.vspd;
_this.nextframe();
//Do something
}
//global.players[1].nextframe();
timer=setTimeout(function(){step();},80);
}
setpos_player(1,200,200,0,1);
var timer=setTimeout(function(){step();},80);
Seems you have an error here:
if (typeof(global.playermap[id])="undefined"){
should be
if (typeof(global.playermap[id])=="undefined"){
also, try replacing all alert calls to console.log and then check out the console for errs
declare script before you use it in the html
you can put that script in head of the page like this
<head>
<script type='text/javascript' src='java.js'></script>
</head>
try it once and replay here
if (typeof(global.playermap[id])="undefined"){
to
if (typeof global.playermap[id] == "undefined"){
Try to put the right directory path for the .js file. For example it may be /java.js or "/scripts/java.js".
The indication if javascript is loaded will be if your alert pops up.
Also, you should know that script tags, with external .js should be added in HEAD section.