Develop Reference

How to target an element inside an iframe that has no Id or Class attributes?

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');

Refresh iframe content without white flash

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.

Display a part of web page using iframe

I have a dynamic table on a web page and i am calling that page on another application. i am trying to display that table alone and not the whole page. So i wrote a code based on some other answers on stack exchange. But still it shows the whole page. If the table has just 2 rows, then it shows the table with 2 rows and the whole empty page. Not able to figure out whats wrong. Is there any other way ?
<script language="javascript" type="text/javascript">
function resizeIframe(obj) {
obj.style.height = obj.contentWindow.document.getElementById("dvMain").offsetHeight + 'px';
// alert(obj.style.height);
}
</script>
<iframe src="www.google.com" width="100%" marginwidth="0" marginheight="0" frameBorder="0" id="iframe" onload='javascript:resizeIframe(this);'>
</iframe>

function tableFromUrl(url, target, before){
url is the file path,
target is an element to append the table to, if there are two arguments.
Or, if a third argument is true, insert the table before the target element.
try{
var O= new XMLHttpRequest(), txt,
div= document.createElement('div');
O.open('GET', url, true);
O.onreadystatechange= function(){
if(O.readyState== 4 && O.status== 200){
txt= O.responseText;
div.innerHTML=txt.substring(t.search(/<table/), t.search(/<\/table>/))+'</table>';
if(before=== true) target.parentNode.insertBefore(div, target);
else target.appendChild(div);
}
}
O.send(null);
}
catch(er){
//error handler
}
}

Show DIV only when iframe page is loaded

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
});

JavaScript Event Handler in ASP.NET

I have the following iframe control (intended to be a facebook like button):
<iframe id="likeButton"
src="http://www.facebook.com/plugins/like.php?href="
scrolling="no"
frameborder="0"
style="border:none; overflow:hidden;
width:450px; height:80px;"
onprerender="setupLink()"
</iframe>
I have the javascript function defined above this as follows:
<script type="text/javascript">
function setupLink()
{
var iframe = $("#likeButton");
var newSrc = iframe.attr("src");
newSrc += encodeURIComponent(location.href) + lblKey.Text;
iframe.attr("src", newSrc);
};
</script>
lblKey is a label on the ASP.NET page that references the specific section of the page. However, as far as I can determine, this function doesn’t get called (if I put an alert() at the start it brings nothing up). I’m new to javascript, but looking around at some articles on the web would indicate that this should update the src property on the iframe.
EDIT:
I have also tried the following:
<script type="text/javascript" >
$(function() {
var iframe = $("#likeButton");
var newSrc = iframe.attr("src");
newSrc += encodeURIComponent(location.href) + '<%= lblKey.Text %>';
iframe.attr("src", newSrc);
});
</script>
Which doesn't work, but neither does:
<script type="text/javascript" >
$(function() {
alert('Hello');
});
</script>

asp.net events (like prerender) don't apply anywhere else (like javascript)
assuming you are using jquery, I would wrap that in a $(), which is a shorthand for "Execute the following as soon as the page has loaded enough to start manipulating it". Also, asp.net controls have a different api then dom elements, so if you want to use that api you need to wrap it in a scriptlet tag
<script type="text/javascript">
$(function ()
{
var iframe = $("#likeButton");
var newSrc = iframe.attr("src");
newSrc += encodeURIComponent(location.href) + "<%= lblKey.Text %>";
iframe.attr("src", newSrc);
});
</script>

Have you considered using the onload event and passing a reference to the iframe?
<script type="text/javascript">
function change_source(iframe)
{
if (iframe.src.indexOf('facebook') < 0)
{
iframe.src = 'http://www.facebook.com/plugins/like.php?href=<%= lblKey.Text %>';
}
}
</script>
HTML something like this...
<iframe id="likeButton"
src="about:blank"
scrolling="no"
frameborder="0"
style="border:none; overflow:hidden;
width:450px; height:80px;"
onload="change_source(this);"
</iframe>