Develop Reference

Reload iframe content (local HTML) when clicking buttons

I´m loading HTML file into a DIV (iframe) when user click on a button.
My problem is when click another button and need to reload the iframe with another HTML file.
This is my code:
<script type="text/javascript">
$(function(){
$('#2015').click(function(){
if(!$('#iframe').length) {
$('#content').html('<iframe id="iframe" src="2015.html" width="700" height="450"></iframe>');
}
});
});
</script>
And here is the button code:
2015
How can I remove the iframe content before to load the next HTML into it?

You made a mistake here. An ID must not start with a number. So use btn2015 instead of 2015 as ID on the button.
The link should do the rest:
Reload an iframe with jQuery

Thanks Jonathan.
Changing the ID and minor changes is working fine.
I´m testing another way and is working too:
Assign a "name" to the iframe with the default HTML:
<iframe name="year" src="2015.html"></iframe>
Direct <a> link with the URL and iframe "name" as target:
Change Link

Add an onClick event "html code" to preloaded ajax html tag/page

I have a website which loads from an ajax code and I have an language select image link which I want to add an onclick event to. The onclick event has to be added to the <a> tag. When the page loads in the browser, it forms the html code as
<a class="whatever">
<div id="1234" class="whatever1" width: 25px; height: 25px;">
<img class="whatever2" alt="" src="imagelink.png" width: 25px; height: 25px;">
</div>
</a>
Since I cannot change the html code manually (I could add javascript into the page), how could I load this:
onClick="SetCookie('Language','En');document.location.href='http://example.com/';"
into the <a> tag
?
Could I use the class in the <a> tag to target the element and load the onclick event into it somehow?
Thanks in advance for any help.

use Jquery. here whatever should be replaced with your <a>'s class name.
$("body").on("click",".whatever",function(){
SetCookie('Language','En');
document.location.href='http://example.com/';
});

Hiding a div that contains an iframe

I have a div that contains the iframe, this iframe loads a URL which shows a page.
Within the iframe, i have a close button which when clicked, hides the div. But I am unable to access the div from within the iframe.
My code as below
<div class="app" id="modalOverlay" style="background-color:rgba(0,0,0,0.5);position:absolute;z-index:1;width:100%;height:100%;top: 0;left: 0;">
<div id="modalContainer" style="position:absolute;z-index:2;margin: -250px 0 0 -250px;top: 50%;left: 50%;background-color: #222;width: 500px;height: 500px;">
<a class="close" style="position:relative;top:-10px;z-index:3">Close</a>
<iframe src="http://www.local.dev/api/v1/track" frameborder="0" style="width:500px;height:500px;position:relative;top:-20px">
</iframe>
</div>
</div>
Within the iframe src view, i load a js which uses jquery
$(document).on('click','.close',function(){
$(document).closest('.app').remove();
});
Anyway to do this?

you can use:
$('#modalContainer', window.parent.document);
second parameter is the context in which to search.
$(document).on('click','.close',function(){
$('.app', window.parent.document).remove();
});

Try something like this:
$('#divtohide', window.parent.document).hide();
Or something like this:
$("#InFrameId").on('click', function() {
$('#divtohide', window.parent.document).hide();
});
EDIT: based on the recent update to your question if the frame is from a different domain, browser will flag this as XSS and you may not be able to do much. One way you can run scripts is if the server of the iframe is configured to send the X-XSS-Protection header with correct value.

This can be done with child to parent frame messaging.
Have the parent frame listen for a message.
<div id="myDiv">
<iframe src="childFrame.html" id="frame1"></iframe>
</div>
<script>
window.onmessage = function(e) {
if(e.data == "close") $("#myDiv").toggle();
}
</script>
The child frame can send a message to the parent frame.
<button onclick="parent.postMessage('close', '*');">Hide</button>
See my gist: https://gist.github.com/sfarthin/9140403
DhruvJoshi's method will have the browser flag this as a XSS attack.

Simply you can't, according to your code, I think your iframe comes from different domain, so a frame from different domain cant access to parent page.
Therefore you may consider using nodejs or maybe, you should read this: Cross domain iframe issue or a search with "crossdomain iframe" keywords will lead you to what you need.

How to close an iframe with javascript/jquery?

I have this element on the page:
<iframe src="http://example.com" id="fa-iframe" scrolling="No" frameborder="0" style="height: 513px; width: 597px; "></iframe>
Now, I run jquery within it and try to close it...
The jquery should execute some function on the element...
I tried solutions such as this..but it didnt work:
document.getElementById('fa-iframe').style.display="none";
How do I close the iframe..while the document with the javascript is inside the iframe?

You need to manipulate the DOM of the parent window (parent). This is subject to the same origin policy.

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.