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

How to use javascript to locate and click an element in an iFrame

Using Javascript in a webBrowser Control in a form, How do I switch to a iFrame
<iframe id="ContentFrame" class="contentIFrame" onload="checkComplementaryPage()" onmouseover="hoverMenu('dividers')" name="ContentFrame" src="HomeContainer.aspx" scrolling="auto" frameborder="0"></iframe><div id="footer" class="footer">
and then locate and click on an element inside that iFrame?
<div class="innerItem50L">
<input type="submit" name="btnPunch" value="punch" id="btnPunch" style="CURSOR:hand;" />
</div>
I am new to programming and am starting with c#. I know even less about Javascript...

Using the following thread as an example:
Make an event happen in child iframe to the parent window in JavaScript?
You could do the following:
$('#ContentFrame').contents().find('#btnPunch').click();
Note: The iframe's source has to be from the same domain, and contents must be loaded so you should put it after window load.

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:

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.

Why does my Iframe lose its content when I execute JavaScript from within the frame to "slide" it's parent div?

I am new to learning js and having a problem with the following:
I have a custom block on my page that looks like this...
<div id="chat">
<iframe src="/sites/all/libraries/webim/client.php?locale=en"
height="100%" width="100%">
</iframe>
</div>
<div class="slider">
<a class="toggleup" href="#">Live Support</a>
</div>
And a function in my script.js file that looks like this...
jQuery(function() {
jQuery(".toggleup").click(function(){
jQuery("#chat").slideToggle("slow");
jQuery(this).toggleClass("toggledown");return false;
});
});
The issue at hand is that client.php returns 2 variations of a page, both of which contain close buttons that execute:
javascript:window.close();
Which I have changed to:
javascript:window.parent.jQuery('.toggleup').click()
When the JavaScript is executed, the chatbox slides closed as it should, but then all I see is:
[object Object]
where my Iframe content should be.
What am I doing wrong?

I don't really get what you are trying to do :).
All I can say for now is that using inline tags for scripts is not a good idea, try to enhance the page from inside the script.js. Are you trying to fire the click on the .toggleup with .click()? This won't work since the .click() function registers a handler for the selected object(s) - in this case you are adding an undefined handler as there are no arguments supplied. If you want to trigger the event on the element use .trigger('click'); instead. The [object Object] thingy is the string representation of an object so I think somehow you assign a stringified object to the iframes src.
Thats all I can say for now, if you specify a little more what you want to do I will try to help you :)

The problem was that I had these two elements in my custom block and both needed to be executed for everything to work.
<div id="chat">
<iframe src="/sites/all/libraries/webim/client.php?locale=en"
height="100%" width="100%">
</iframe>
</div>
<div class="slider">
<a class="toggleup" href="#">Live Support</a>
</div>
However when calling the jQuery function like this...
javascript:window.parent.jQuery('.toggleup').click()
instead of clicking the link, the box would close as expected but the div and iframe are never created.
Instead I changed the following line in my custom block from...
<a class="toggleup" href="#">Live Support</a>
to...
<a class="toggleup" href="#" id="chatbtn">Live Support</a>
and called it using
parent.document.getElementById('chatbtn').click();
instead of the previous jQuery code therefore executing everything in my custom block and not just the jQuery for closing the slide.
Hope it helps someone.
: