I have an iframe page within a DIV and I only want the DIV to display once the iframe page is loaded/available. If the iframe page does not load/not available, do not show that DIV at all.
I wrote some JS however it doesn't work as I expected it to, the DIV still display regardless if the iframe page is available or not.
Code:
<div class="ad-container" style="display:none">
<iframe src="//oonagi.org" border="0" scrolling="no" allowtransparency="true" width="500" height="300"></iframe>
</div>
var adContainer = $('.ad-container');
// check if ad container exist
if(adContainer.length > 0) {
// only show ad once iframe page is loaded
adContainer.find('iframe').load(function() {
adContainer.css('display', 'block');
});
}
you should change iframe src at document.ready inorder to make it fire your iframe load's event.you can try this:
$(document).ready(function() {
$('#frame').bind('load', function() { //binds the event
$('#ad-container').show();
});
var newSrc = $('#frame').attr('src') + '?c=' + Math.random(); //force new URL
$('#frame').attr('src', newSrc); //changing the src triggers the load event
});
Related
I can't put any id or class to the iframe I work because of some technical issues, and this iframe sometimes don't show any content inside and I am having a blank space instead.
I wanted to make the iframe disappear when it loads blank, to protect my page's structure with javascript.
Here is the code I wanted to make it disappear when there are no contents.
<div id="myDiv">
<iframe width="363" height="300" src="javascript:false">
<div id="iframeDiv">
----Contents----
</div>
</iframe>
</div>
I tried below script but somehow it doesn't work. Thanks in advance.
<script type="text/javascript">
setTimeout(function () {
var myTag=document.getElementById('myDiv').getElementsByTagName('iframe');
var myTagContent = myTag.contentDocument || iframe.contentWindow.document;
var myTagDiv = myTagContent.innerDoc.getElementById('iframeDiv');
if (myTagDiv === null)
{
document.getElementById("myDiv").style.display = "none";
}
}, 500);
</script>
Remove the outer <div> before <iframe>.
Add id="ifr" to <iframe> tag.
Then:
iframeDivElement = window.parent.getElementById('ifr').document.getElementById(iframeDiv');
EDIT:
Alternatively you can use iframe index in your document.
iframeDivElement = window.parent.frames[0].document.getElementById(iframeDiv');
I have an iframe in my site that must reload every second (it's just reloading simple HTML for data analysis). This causes a really annoying white flash each time it reloads.
I have put hours of research into trying to remove this flash. Here's what I have (which doesn't work), which creates a new iframe, adds it to the DOM, and then removes the old one, effectively reloading the page. It still flashes white though:
$( document ).ready(function() {
setInterval(function() {
var container = document.getElementById('bottom-frame-container');
var source = container.getElementsByTagName('iframe')[0];
var newFrame = document.createElement('iframe');
for (i = 0; i < source.attributes.length; i++) {
var attr = source.attributes[i];
newFrame.setAttribute(attr.name, attr.value);
}
newFrame.style.visibility = 'hidden';
newFrame.id = 'bottom-frame';
container.appendChild(newFrame);
newFrame.style.visibility = 'visible';
container.removeChild(container.getElementsByTagName('iframe')[0]);
}, 1000);
});
The iframe code is simply:
<div id="bottom-frame-container">
<iframe id="bottom-frame" width="100%" height="60%" frameborder="0" allowTransparency="true" src="http://10.62.0.15/haproxy?stats">
</div>
I'm completely open to any suggestions or alternative approaches here, I'm getting a bit desperate!
Here's how i would handle this issue : have one 'load' div on top of the iframe to prevent the blinking from being seen.
Then before loading you fadein the warning --> when fadein is finished you trigger load --> when load is finished you fadeout the warning.
fiddle is here :
http://jsfiddle.net/bZgFL/2/
html is :
<iframe
width=500px
height=300px
id = 'myFrame'
style='position:absolute;top:0;'
src = 'http://jsfiddle.net/'
>
</iframe>
<div id = 'myLoad'
style='float:top;top:0;
position:absolute;
background-color:#CCC;
min-width:500px;
min-height:300px;
'>
<div style='position:absolute;top:130px;left:200px;'>
<b> Loading... </b>
</div>
</div>
</div>
code is (using jQuery)
var ifr = document.getElementById('myFrame');
setFrame();
setInterval(setFrame, 3000);
function setFrame() {
$('#myLoad').fadeIn(200, setAdress);
}
function setAdress() {
ifr.onload=function() { $('#myLoad').fadeOut(200) ;}
ifr.src = 'http://jsfiddle.net/';
}
Obviously it needs fine tuning for the look, and if you want the user to be able to click the iframe, you'll have to disable pointer on top div, but it should get you going.
Can you put the two iFrames on the page and hide show them with CSS. This much less of an impact on the page than removing and inserting elements into the DOM.
Then add an onload event to both of them that triggers the current iFrame to hide and reload, while the new on shows? Use RequestAninationFrame to help reduce flicker. Code would look something like this.
var currentIFrame = 1;
$('iframe').on('load',function(){
$(this).show()
$('#iframe'+(currentIFrame=1-currentIFrame)).hide().delay(1000).reload();
})
This way you only do the switch once your sure the content has fully loaded.
I know this is an old question but I'm really not sure why someone didn't post this obvious solution....
Just paste this javascript code into any page that has an iframe.
<script>
// Preventing whiteflash in loading iframes.
(function () {
var div = document.createElement('div'),
ref = document.getElementsByTagName('base')[0] ||
document.getElementsByTagName('script')[0];
div.innerHTML = '<style> iframe { visibility: hidden; } </style>';
ref.parentNode.insertBefore(div, ref);
window.onload = function() {
div.parentNode.removeChild(div);
}
})();
</script>
It will simply renfer any iframe visibility:hidden until which time the iframe is loaded and then make it visible.
I am setting up a website and what I need is for when a button is clicked it changes the link in the iframe so it goes to another website. Here is what I got so far:
<script>
var id = 'http://www.aWebsite.com';
function link(){
id = 'http://www.aSecondWebsite.com'
}
</script>
<script>
document.writeln('<iframe name="heel"src="' + id + '" height="300" width="700"> </iframe>');
</script>
<button onclick="link()">Click Me</button>
I am not sure why when the button is clicked the id variable isn't changed?
Actually the value of id is changed, but document.writeln() is not in the link function, hence it's not executed.
A quick-fix would be to move the document.writeln() into link(), but that would be a disastrous fix. document.write(ln)() wipes out everything in the document, and creates a new one, when used after the page has been parsed. You need to do something like this:
function link() {
id = 'http://www.example.org';
document.getElementById('heel').src = id;
}
Then add your iframe element to a HTML, and remove the whole script with document.writeln().
<iframe id="heel" name="heel" src="http://www.example.com" height="300" width="700"></iframe>
EDIT
If you want to create a new iframe element, you can do it like this:
function link() {
var frame = document.createElement('iframe'); // creates an iframe element
id = 'http://www.example.org';
frame.width = '700px'; // sets the width for the new iframe
frame.height = '300px'; // sets the height for the new iframe
frame.name = 'heel2'; // sets the name for the new iframe
frame.src = id; // sets the src for the new iframe
document.body.appendChild(frame); // appends the new iframe to body as a last element
}
I'm trying to pull a YouTube video id from an img and then pass it into an iframe to play an embedded video. My iframe is inside a div which is invisible until the img is clicked:
<div id="testimonialbackground" style="display:none;">
Click here to close the video
<iframe id="testimonialframe" src="" frameborder="0" allowfullscreen></iframe>
</div>
<img src="http://img.youtube.com/vi/x-ROeKGEYSk/1.jpg" onclick="toggledisplay(this);" />
And here's the JavaScript. It works fine until this line elem.setAttribute('src', newsrc);, at which point my page freezes up:
function toggledisplay(obj) {
var div = document.getElementById('testimonialbackground');
var elem = document.getElementById('testimonialframe');
if (div.style.display == "block") {
div.style.display = "none";
elem.setAttribute('src', "");
}
else {
div.style.display = "block";
var explosion = obj.src.split("/");
var newsrc = "http://www.youtube.com/embed/" + explosion[4] + "?autoplay=1";
elem.setAttribute('src', newsrc); // <---- BROKEN LINE RIGHT HERE
elem.contentWindow.location.reload(); //to refresh the iframe
}
}
Thanks for any help!
src is an attribute you can access directly so instead of your line elem.setAttribute('src', newsrc); just use this:
elem.src = "http://www.youtube.com/embed/" + explosion[4] + "?autoplay=1";
Once you set the src there is no need to refresh the iframe, as setting the src will do that automatically. See What's the best way to reload / refresh an iframe using JavaScript?
for more info on reloading iframes. (Basically it points out that you can set the src of an iframe to itself to refresh the iframe).
I have two iframes in an html page
<table border="1" width="100%" height="100%">
<tr>
<th><iframe id="i1" width="100%" height="100%" src="/wordpress"></iframe></th>
<th><iframe id="i2" width="100%" height="100%" src="/wordpress"></iframe></th>
</tr>
</table>
I am giving click event to "a" tag to change the href so that when any link within that iframe is clicked and src of iframe with id "i1" changes the src of second iframe also change subsequently and both iframe have the same page view.
$('a').click(function(e){
var id = $(this).attr('id');
var href = $(this).attr('href');
var ahash={
'id':id,
'href':href
};
if (getFrameElement().id=="i1")
window.parent.document.Aaddevent(e, ahash);
});
The href is changed by this
document.sendevent=function(e, ahash){
if (ahash.id!=undefined) {
$('#i2', window.parent.document).contents().find('#'+ahash.id).trigger(e);
} else {
$('#i2', window.parent.document).attr('src', ahash.href);
}
};
This works fine. Now my question is i have given scroll event to iframe with id "i1" so that when iframe is scrolled the other iframe also gets scrolled automatically. This is working well when the page is loaded but when click event is triggered and the page view of both iframe changes the scroll event is not working.
function getFrameTargetElement(oI)
{
var lF = oI.contentWindow;
if(window.pageYOffset==undefined)
{
lF= (lF.document.documentElement) ? lF.document.documentElement : lF=document.body;
}
//- return computed value
return lF;
}
//- get frame target elements
var oE1 = getFrameTargetElement( document.getElementById("i1") );
var oE2 = getFrameTargetElement( document.getElementById("i2") );
//- on source scroll
oE1.onscroll = function (e) {
var scrollTopValue;
var scrollLeftValue;
//- evaluate scroll values
if(window.pageYOffset!=undefined)
{
scrollTopValue = oE1.pageYOffset;
scrollLeftValue = oE1.pageXOffset;
}
else
{
scrollTopValue = oE1.scrollTop;
scrollLeftValue = oE1.scrollLeft;
}
//- mimic scroll
oE2.scrollTo( scrollLeftValue, scrollTopValue);
}
I am not getting what i need to change so that when click event is trigged on one iframe and the src of both iframe changes the scroll event should also work alongwith like it worked when page loaded initially.
After the pages load the new url, you have to re-bind your scroll event handler. Listen to the iframe's onload event, and when that fires, re-bind the scroll handlers.
It looks like you're using jQuery. Here's how to do it:
$("#i1").load(function ()
{
var oE1 = getFrameTargetElement( document.getElementById("i1") );
var oE2 = getFrameTargetElement( document.getElementById("i2") );
//- on source scroll
oE1.onscroll = function (e) {
var scrollTopValue;
var scrollLeftValue;
//- evaluate scroll values
if(window.pageYOffset!=undefined)
{
scrollTopValue = oE1.pageYOffset;
scrollLeftValue = oE1.pageXOffset;
}
else
{
scrollTopValue = oE1.scrollTop;
scrollLeftValue = oE1.scrollLeft;
}
//- mimic scroll
oE2.scrollTo( scrollLeftValue, scrollTopValue);
}
}