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?
Related
I try to create a one liner iframe that users can add in their sites and this iframe adress is my site.
My problem is that if i want it to be able to become full screen i need to supply them with js code and i don't want it i want it to fetch the js code from my site.
The js that i use to make full screen when needed is :
<script>
window.addEventListener('message', receiveMessage, false);
function receiveMessage(evt) {
if (evt.origin === 'site src') {
//if (isNaN(evt.data)) return;
var iframe = document.getElementById('someId');
if (event.data.height !== 0) {
iframe.height = 100 + "%";
iframe.width = 100 + "%";
iframe.style.position = 'fixed';
iframe.style.top = '2%';
iframe.style.left = '2%';
}
else {
iframe.height = 110 + "px";
iframe.width = 300 + "px";
iframe.style.position = 'relative';
}
}
}
</script>
This script currently written at the client the one that use the iframe.
The iframe looks like.
<iframe id="expertips_iframe" src="my site adress" width="300px" height="110px" frameBorder="0" scrolling="no"></iframe>
I want the iframe line to fetch the js code from my site and inject it to the user/client that use the iframe, or any other way as long as i do it (the iframe and the js) in one line.
Hope it is clear enough and thank you.
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 have the following code, which resize the IFrame depending on the Size of the IFrame Content:
<html>
<head>
<title></title>
</head>
<body>
<iframe src="http://page.html"
id="iframeid" width="600" height="700" scrolling="no" onload="setIframeHeight(this.id)"></iframe>
<script>
function setIframeHeight(id) {
var ifrm = document.getElementById(id);
var doc = ifrm.contentDocument? ifrm.contentDocument:ifrm.contentWindow.document;
ifrm.style.height = "10px";
ifrm.style.height = getDocHeight(doc) + 4 +"px";
}
function getDocHeight(doc){
doc = doc || document;
var body = doc.body; html = doc.documentElement;
var height =Math.max(body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight);
return height;
}
$('iframe').css('height', $('iframe body').height() + 'px');
</script> </body> </html>
This works fine. The IFrame size is set depending on the size of the imported site
http//:page.html
The problem is that when http//:page.html contains links. When this link is clicked, the iframe size is not updated.
Question is: How to update the iframesize when a link is clicked?
Add an event listener for loads in the iframe to fire your function:
$("iframe").on("load", function() {
setIframeHeight(id);
});
This should work as long as the iframe URL is the same domain as the parent document. If it's not you'll probably run into browser security restrictions which will cause this to fail.
I use the following code to achieve dynamic iframe height:
In the <head>:
<script language="javascript" type="text/javascript">
function resizeIframe(obj) {
obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
}
</script>
In the <body>:
<iframe name="myiframe" src="somepage.html" width="100%" frameborder="0"
scrolling="no" onload='javascript:resizeIframe(this);' />
</iframe>
This codes works fine with height increasing only. So, when the content inside the iframe increases in height, the iframe updates its height and increases with it.
The problem is with height decreasing or shrinking. When the content inside the iframe decreases, it doesn't decrease and causing big unwanted white space. This only occurs in Chrome, IE & FF works fine.
Here is my Page
I want to know how to make this code works to auto shrink iframe height when it decreases?
Screenshot one:
Screenshot two:
Update 1
I placed the following code in the <head>
<script src="jquery-1.10.2.min.js"></script>
<script language="javascript" type="text/javascript">
$(function(){
var iframeDoc = $('iframe[name="dservers"]').contents().get(0);
$('iframe[name="dservers"]').load(function(){
docHeight = $(iframeDoc).height();
$('iframe[name="dservers"]').height( docHeight );
});
});
The iframe code in the <body>
<iframe name="dservers" src="dual_core.html" width="100%" frameborder="0"
scrolling="no" /></iframe>
The iframe not showing in the page. It appears for one second and then disappears.
Update 2
I think The problem was the $ character before (function(){, I removed it. I'm sorry I don't have much experience with jquery. I updated the page and removed the onload="resizeFrame()" but the iframe doesn't act dynamically now.
Problem Solved
I was digging in the internet and I found a code solved the whole problem for me. I would like to share it so anyone can use it in order to get dynamic iframe height.
First, put the following code between the <head> tags:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
function getDocHeight(doc) {
doc = doc || document;
var body = doc.body, html = doc.documentElement;
var height = Math.max( body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight );
return height;
}
function setIframeHeight(myiframeid) {
var ifrm = document.getElementById(myiframeid);
var doc = ifrm.contentDocument? ifrm.contentDocument: ifrm.contentWindow.document;
ifrm.style.visibility = 'hidden';
ifrm.style.height = "10px";
ifrm.style.height = getDocHeight( doc ) + 5+"px";
ifrm.style.visibility = 'visible';
}
</script>
<script>(function(run){
for (i=0;i<frames.length; i++) {
var f1 = document.getElementsByTagName('myiframename')[i];
if(!f1 && window.addEventListener && !run){
document.addEventListener('DOMContentLoaded', arguments.callee, false);
return;
}
if(!f1){setTimeout(arguments.callee, 300); return;}
f2 = f1.cloneNode(false);
f1.src = 'about: blank';
f2.frameBorder = '0';
f2.allowTransparency = 'yes';
f2.scrolling = 'no';
f1.parentNode.replaceChild(f2, f1);
}
})();
</script>
Second, the Iframe code in the <body> :
<iframe id="myiframeid" name="myiframename" src="somepage.html" width="100%"
frameborder="0" scrolling="no" onload='javascript:setIframeHeight(this.id);' />
</iframe>
Third and Last, the CSS:
#myiframeid{
width: 100%;
}
Note: You should have Name and ID for the Iframe.
Compatible with all browsers (Chrome, Firefox, IE).
Have a good day!
I wrote a little library that deals with all these issues and keeps the iframed sized when the content changes or the browser window is resized.
https://github.com/davidjbradshaw/iframe-resizer
I thought about it quite a bit, and think I came up with another solution that may resolve your problem from the parent document. Rather than editing the documents in your iframe. However I can't test it due to cross origin policy. Try this out and let me know how it works.
var iframeDoc = $('iframe[name="dservers"]').contents().get(0);
$('iframe[name="dservers"]').load(function(){
docHeight = $(iframeDoc).height();
$('iframe[name="dservers"]').height( docHeight );
});
Hope this does it for you.
Edit: This fix would require you to remove the onload="" function.
Edit-2: You seem to have combined the two scripts. You have this:
function resizeIframe(obj) {
obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
var iframeDoc = $('iframe[name="dservers"]').contents().get(0);
$('iframe[name="dservers"]').load(function(){
docHeight = $(iframeDoc).height();
$('iframe[name="dservers"]').height( docHeight );
});
}
Replace that entire script with this:
$(function(){
var iframeDoc = $('iframe[name="dservers"]').contents().get(0);
$('iframe[name="dservers"]').load(function(){
docHeight = $(iframeDoc).height();
$('iframe[name="dservers"]').height( docHeight );
});
});
And remove the onload="resizeFrame()" from the iframes tag.
I am trying to append script tag through JS and set its src. Following is the code:
var myscript = document.createElement('script');
myscript.setAttribute('src', 'http://player.ooyala.com/player.js?playerId=player&width=320&height=240&embedCode=thbXMxMzpq0RhOS82Hzx1lma8UMnFN-3&callback=apicallback');
document.getElementById('curr-video').appendChild(myscript);
While doing so modern browsers FF,Chrome,Safari works fine.
But IE8,7 throws
error [ null is null or not an object player.js ]
The video src is an ooyala video service.
Is there any solution how can I append script tag and set its src(retrieved from JSON).
IE7 doesn't give error when player.js loads with page but it does when loaded dynamically. Besides if you ignore the error and let the script works, player appears normally. If you insist on to remove error, you can create an iframe and load a player.html page inside it so that you can run your player.js when page loads without error.
<html>
<head>
<script type="text/javascript">
function createIframe (iframeName, width, height) {
var iframe;
if (document.createElement && (iframe = document.createElement('iframe'))) {
iframe.name = iframe.id = iframeName;
iframe.width = width;
iframe.height = height;
iframe.frameBorder = "0";
iframe.style.border = "none";
iframe.src = 'about:blank';
document.body.appendChild(iframe);
}
return iframe;
}
function load_item() {
var iframe = createIframe ('iframe0', 320, 240);
if (iframe) {
iframe.src = "player.html";
}
}
</script>
</head>
<body>
<a onclick="load_item();">click to load</a>
</body>
</html>
Here is player.html:
<html>
<body style="margin: 0px; padding: 0px;">
<script src="http://player.ooyala.com/player.js?........."></script>
</body>
</html>