Develop Reference

How do I stop an "iframe" from showing previously loaded (old) content?

I'm having problem with iframe/pop-up showing old content.
I only have one iframe tag and then change the src of it with JavaScript to show different image albums.
So when you click the album name the src is changed and then trigger the pop-up.
Lets say you start opening album 1 then it loads nicely and no problem.
Then when you open the next album (album 2) then pictures from album 1 are shown for the first 3-7 seconds before the pictures from album 2 are shown.
How do I prevent this behaviour?
Here is my HTML code:
<div class="modal-content">
<iframe class="iframe" id="iframeurl" src="lpading.gif" frameborder="0" height="100%" width="100%" style="">
</iframe>
</div>
Here is my JavaScript code:
function showdiv() {
document.getElementById('iframeurl').src = data.nurl;
$("#gluggi1").trigger('click');
}

It sound lika normal behaviour due to loading the content. You can empty the iframe before you load the new content:
$('#iframeurl').attr('src', 'about:blank');

Sluggish animation on DOM change

Imagine that i have a constant animation running, rather it be css, javascript, or in this case for the sake of simplicity a .gif file, and then i append to the DOM a "heavy" element like a youtube iframe and the constant animation get sluggish for a second.
Is there any straightforward or workaround way to achieve such DOM change without staggering the animation?
In the example below notice that if you change the iframe for yet another gif or even one iframe with a fairly simple website the animation runs without staggering or getting sluggish.
Demo/Example: http://codepen.io/anon/pen/xbdewR
stackoverflow is throwing a warning that links to codepen.io must be accompanied with code, it is my first time posting so i hope this is what it is asked for:
$('.button').on('click', function(e) {
// Sluggish
$('.video-container').html('<iframe width="560" height="315" src="//www.youtube.com/embed/FprQEGc3Za4" frameborder="0" allowfullscreen></iframe>');
// Not Sluggish
//$('.video-container').html('<img src="http://media2.giphy.com/media/e7FOBuKCDtwWI/giphy.gif"/>');
// Not Sluggish
//$('.video-container').html('<iframe width="560" height="315" src="http://html5doctor.com/" frameborder="0" allowfullscreen></iframe>');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="http://media.giphy.com/media/lRBEntSxN87WE/giphy.gif" alt="" />
<div class="video-container">
<a class="button" href='#'>wait for the gif to load completely and press me</a>
</div>

Unfortunately, there is no solution to your problem... It is a matter of web browsers.
This post may help you: Why does my spinner GIF stop while jQuery ajax call is running?

Loading an iframe is going to cause massive delay with loading, layout and DOM changes.
You may be able to decrease some of that impact by making the iframe display: none until it's needed, then rendering it with display: block .. not sure if you have enough control over the iframe video to be able to make it not autoplay even if it's invisible, though.

You can do the following :
write the html code for your iframe with style as display : none
<iframe width="560" height="315" src="//www.youtube.com/embed/FprQEGc3Za4" frameborder="0" style="display:none;" allowfullscreen></iframe>
and when you click the button then the code js code should be :
$('.button').on('click', function(e){
$('iframe').css('display','block');
});
in this way your gif file won't be sluggish.

Get the URL of an iframe then alert it

So basically I'm trying to make a button so when you press it, it alerts the url the iframe is on.
My HTML:
<iframe id="iframeid" scrolling="auto" width="100" height="100" src="http://www.google.com" >
</iframe>
<button onclick="myFunction()">Click me</button>
Then for my Javascript I have:
function myFunction() {
alert(document.getElementById('iframeid').contentWindow.location.href);
}
Though when I press it it's not working. When I replace the alert with something else like "Potato" then it will work. Though for some reason it can't get the url, or maybe the frame. Any help accepted!

When the frame is displaying a document on another origin (as in your example), there is no way to get the URL that is being displayed.
The URL might include personal data belonging to the user so your site is prevented from accessing it.
Always look at your JS console:

Append iframe to div without refreshing

I have a html structure like:
<div id="bar">
<iframe id="foo"></iframe>
<iframe id="foo2"></iframe>
</div>
Each iframe has javaScript running inside it.
Now: I need to add another element... <iframe id="foo3"></iframe> to the end of the div without foo & foo2 from refreshing. I thought jQueries.append() was the way to do this, but this still refreshes the original iframes (Which resets the javaScript inside the already existing iframes).
Any tips/ideas? Thanks

Below will be the code
document.getElementById("bar").innerHTML += '<iframe id="foo3"></iframe>';
Not sure if it will refresh the other iframes

show only one div within an iframe (javascript, JQuery...)

First just let me say I'm open to ideas on a different approach altogether.
I have and iframe as such:
<div id="testloadlogin">
<iframe src="../security/login.aspx" width="400" height="500"
scrolling="auto" frameborder="1">
[Your user agent does not support frames or is currently configured
not to display frames. However, you may visit
the related document.]
</iframe>
</div>
The page being loaded with the iframe has a div called loginInnerBox. I only want to display the loginInnerBox and everything inside of it.
Any ideas on how to do this? I was thinking of using Jquery or javascript of some kind to remove everything else on the page loaded by the iframe, not sure how to access that though...
Just to be clear I want everything on my page outside of the iframe to remain intact. I want the equivalent of saying $.('testloadlogin').load('../security/login.aspx' #loginInnerBox) which would just get loginInnerBox's html and place it in the testloadlogin div. However I need the back-end processing from the other page which is supported by iframe, but not by the Jquery load.
The markup of the page loaded by the iframe is
<body>
<div>
</div>.......
<div class="AspNet-Login" id="ctl00_CLPMainContent_Login1">
<div id="loginInnerBox">
<div id="loginCreds">
<table>
</table>
</div>
</div>
</div>
<div>
</div>....
</body>
Do you need more information than that?
I tried this, it had no effect:
<div class="ui-corner-all" id="RefRes">
<div id="testloadlogin">
<iframe onload="javascript:loadlogin()" id="loginiframe" src="../security/login.aspx"
scrolling="auto" frameborder="1">
[Your user agent does not support frames or is currently configured
not to display frames. However, you may visit
the related document.]
</iframe>
</div>
</div>
<script type="text/javascript">
function loadlogin() {
$('<body>*', this.contentWindow.document).not('#ctl00_CLPMainContent_Login1').hide();
}
</script>

With jQuery, you can load not just the contents of a URL, but a specific CSS selector from within that URL. This would be a much cleaner approach. It's like this.
$("#area").load("something.html #content");
Via CSS Tricks

$("iframe").contents().find("*:not(#loginInnerBox)").remove();
Be aware this would only work on iframes loaded from the same domain (same origin policy)
EDIT: Probably this removes children of loginInnerBox as well. In that case you could try to clone it before:
var iframe = $("iframe").contents(),
loginBox = iframe.find("#loginInnerBox").clone();
iframe.find("*").remove();
iframe.append(loginBox);
Something like that..

Add this to the <iframe>-elememt:
onload="$('body>*',this.contentWindow.document).not('#ctl00_CLPMainContent_Login1').hide();"
it will hide every child of the body except #ctl00_CLPMainContent_Login1
If #ctl00_CLPMainContent_Login1 contains more than the loginbox, you have to use the suggestion using clone() posted by pex.