Controlling the top parent window from iframe with jquery or javascript - javascript

I have a page on my site which has a blank text field. Next to this is a button which opens up an iframe (using colorbox). This iframe shows a list of files - next to each file is a button which puts the filename in to the text field in the parent window by calling the function below:
function returnImage(file){
$('#input_text_id', window.parent.document).val(file);
parent.$.fn.colorbox.close();
}
This works great, however a problem arises when I click a folder in the iframe. This causes the page in the iframe to load a different page of files. After this, the function no longer works.
Is there anyway that I can use jquery to access the very top parent page and control that? So we would have something like:
function returnImage(file){
$('#input_text_id', theoriginalwindow.document).val(file);
parent.$.fn.colorbox.close();
}
Hope this makes sense, if you require more info, please let me know.
Thanks

In top window:
<script>
function returnImage(file, doc){
$('#input_text_id', doc).val(file);
$.fn.colorbox.close();
}
</script>
From iframe:
<script>
top.returnImage(file, document); // top is top parent window.
</script>

Use top.

Related

Close child window and open link in a framed page

Trying to open a link in a framed page and close the child window. The link bellow is in a child window and when I click it opens the link in the framed page, but did not close the child window
<a target="Resultado" href="?Tela=1"
onClick="javascript:return confirm('TryMe');window.close();">
I have used a code like this to close the window... but couldn't get it to work with the above code.
<a href="javascript:window.opener='Resultado';window.close();">
Try this:
<a target="Resultado" href="?Tela=1" onclick="clickHandler(event, this);">Link</a>
And declare this:
function clickHandler(e, el) {
var choice = confirm('TryMe');
if (!choice) {
e.preventDefault();
}
window.close();
}
I wasn't sure of your original use of window.close() since it came after the return and would never execute, so it's up to you to move it to where you want.
Create another webpage on your webserver & use that as the Custom URL thankyou page for your form.
In that new webpage have just one line of code.
<body onload="javascript:window.opener.childClosed();window.close();">
--
That code will call a javascript function in the parent window and then close the child popup; you can then use that javascript function to do a redirect on your parent page.
I am not to sure where the URL of your 'Thank you for requesting...' page is, but here is some javascript to redirect to google on your parent page after the form is submitted.
function childClosed() {
window.location = "http://www.google.com/"
}
You can put that script before your closing <body> tag.
--
Hopefully I have understood your query OK, let me know if you have any questions or need any clarification on this possible solution.
-
I have made a very basic clone of your webpage & form here if you want to test out the functionality, 'Factoring Question?' is the link that contains this code.

ReferenceError: function is not defined when calling from iframe

I am trying to create a bookmarklet functionality similar to the thefancy.com site, I created a bookmarklet button which when clicked loads a js file which is located on some other website http://wonderstreet.localhost.com and append it in the head section of the current document, it then creates a iframe and append it in the body of the current document.
The above mentioned js file contains various functions which I need to call from this iframe, for example, there is a "Close" button in the iframe which when clicked should call the function which is located in the above js file (this function will close or remove the iframe)
The iframe gets created and displayed correctly.(I need to fetch all the images of current document and show it in iframe)
Problem is that when I click close button it says: ReferenceError: function is not defined
Can somebody please help and let me know how can I solve this ?
[I am using core javascript and not jquery]
Here is the code from the js file =>
function create_bookmarklet_iframe(thewonderstreet_userid) {
var ifra=document.createElement('iframe');ifra.src="http://localhost.com/index.php/image_picker?userid="+userid;ifra.setAttribute("id","bookmarklet_iframe");ifra.setAttribute('allowtransparency',true);ifra.setAttribute('style','width:279px;height:372px;border:1px solid #4c515c;position:fixed;top:10px;right:10px;z-index:10000001;margin:0;background-color:#eff1f7;');void(document.body.appendChild(ifra));
}
function remove_bookmarklet_iframe(id) {
var element = document.getElementById(id);
element.parentNode.removeChild(element);
}
And this is the bookmarklet code:
javascript:%20(function%20()%20{%20%20%20%20%20userid%20=%20'724c5a0e49e4dac588a90e17233982493027197d';%20%20%20%20%20var%20search_url%20=%20'http://localhost.com/javascript/bookmarklet_js.js';%20scripts_finder%20=%20document.getElementsByTagName('script');%20var%20found_url%20=%200;%20for%20(var%20i%20=%20scripts_finder.length;%20i--;)%20{%20var%20actual_url%20=%20scripts_finder[i].src.split("?");%20if%20(search_url%20==%20actual_url[0])%20{%20found_url++;%20}%20}%20if(found_url%20<=%200)%20{%20s=document.createElement('SCRIPT');s.type='text/javascript';s.src='http://localhost.com/javascript/bookmarklet_js.js?_='+(Math.random());document.getElementsByTagName('head')[0].appendChild(s);%20}%20%20var%20s_id%20=%20'bookmarklet_iframe',%20%20%20%20%20%20%20%20%20s_avail%20=%20document.getElementById(s_id),%20%20%20%20%20%20%20%20%20can_continue%20=%20true,%20%20%20%20%20%20%20%20%20t;%20%20%20%20%20if%20(s_avail)%20{%20%20%20%20%20%20%20%20%20can_continue%20=%20false;%20%20%20%20%20%20%20%20%20alert('Alreadyopen');%20%20%20%20%20}%20%20%20%20%20setTimeout(function()%20{%20if%20(can_continue)%20{%20create_bookmarklet_iframe(userid);%20}%20},1000);%20})();
Ok, I solved it myself, what I was doing was wrong, instead of creating an iframe I used div, so basically I eliminated iframe, created div by javascript and appended it to document body.

How to force an iFrame to reload once it loads

I have numerous iframes that load specific content on my pages. Both the parent and iframe are on the same domain.
I have a scrollbar inside the iframe that doesn't seem to load correctly in all browsers. But when I refresh the iframe it loads perfect. I have no idea why it does this.
I have used the meta refresh, which works but I don't want the page to refresh constantly, just once.
The solution I'm looking for will reload the iFrame content after the iFrame is opened, with a minimal delay.
Edit
I realized that my page loads all of my iframes when the index is loaded. The iframes appear in a jQuery overlay, which is also loaded but visibility:hidden until called. So on this call is when I would want the iframe to be reloaded.
Could anyone help me come up with a Javascript function that reloads the iFrame when I click the link to the iFrame? I've gotten close but I know nothing about js and I keep falling short. I have a function that reloads the page, but I can't figure out how to get it called just once.
I have this so far:
<script type="text/javascript">
var pl;
var change;
pl=1;
function ifr() {
if (pl=1) {
document.location.reload([true]);
alert("Page Reloaded!");
change=1;
return change;
}
change+pl;
}
So basically it uses the document.location.reload which works to reload the page. I'm trying to then make pl change to something other than 1 so the function doesnt run again. I've been calling this JS from the body with onLoad.
All the leads on this went dead, but I did find a code snippet that worked. Not written by me, and I don't remember where it came from. Just posting to help someone should they ever have the same question.
<div class="overlay-content"> //Content container needed for CSS Styling
<div id="Reloader">
//iFrame will be reloaded into this div
</div>
//Script to reload the iframe when the page loads
<script>
function aboutReload() {
$("#Reloader").html('<iframe id="Reloader" height="355px" width="830px" scrolling="no" frameborder="0" src="about.html"></iframe>');
}
</script>
</div>
Basically just loads the iFrame source when the window with the iFrame opens, as opposed to the iFrame loading when the original page loads.
Beyond the scope of the original question, however this jQuery snippit works with cross domain iframe elements where the contentDocument.location.reload(true) method won't due to sandboxing.
//assumes 'this' is the iframe you want to reload.
$(this).replaceWith($(this).clone()); //Force a reload
Basically it replaces the whole iframe element with a copy of itself. We're using it to force resize embedded 3rd party "dumb" widgets like video players that don't notice when their size changes.
On the iframe element itself, set an onload:
iframe.onload = function() {this.contentWindow.location.reload(); this.onload = null;};
(Only works if the iframe's location is in the same domain as the main page)
Here's a complete solution to the original question:
<iframe onload="reloadOnce(this)" src="test2.html"></iframe>
<script>
var iframeLoadCount = 0;
function reloadOnce(iframe) {
iframeLoadCount ++;
if (iframeLoadCount <= 1) {
iframe.contentWindow.location.reload();
console.log("reload()");
}
}
</script>
The updated question is not really clear (what's "the link to the iFrame" and where is it in your snippet?), but you have a few issues with the code:
"calling this JS from the body with onLoad", assuming you mean an iframe's body, means the variable you're hoping to use to avoid infinite reloading will get clobbered along with the rest of the iframe's page when it's reloaded. You need to either load a slightly different URL in the iframe (and check the URL on iframe's onload before reloading) or put the flag variable in the outer page (and access it with parent.variableName - that should work I think)
if (pl=1) { should use ==, as = is always an assignment.
change+pl; has no effect.

jquery callback after if statement

Howdy guys, im having trouble finding help on creating a callback in certain situations.
I have a piece of code which loads a links page in to an iframe and then changes the scr if another link is pressed.
$(".iframe").hide();
$(".lnk").click(function(){
$(".iframe").show('slow')
;})
;
$(".frmclose").click(function(){
$(".iframe").hide('slow')
;})
;
The above runs within (document).ready
below is outside of this (for some reason it does not work on the inside)
function changeIframeSrc(id, url) {
if (!document.getElementById) return;
var el = document.getElementById(id);
if (el && el.src) {el.src = url;return false;}return true;}
the link :
google
prior to this i have the div in which the iframe is in become unhidden. I also have a button within that div which hides the div + iframe.
What im having problems with is once the iframe has been opened and then closed via the div link if it is re-opened by clicking a different link the iframe unhides to display the old page then changes. But what i want is for the frame to load the new page(while hidden) then unhide to display it. I thought of using a callback after the iframe src change but i cant see where i would implement it.
Example of it happening
(click the GDPH button to see the links for the iframe)
Any thoughts or help appreciated.
Regards
B Stoner
I think that all you need to do is clear the src of the <iframe> when it is closed. That will clear the page so that next time you show the iFrame it will start out blank again.
I made a small demo of this functionality that uses the 3 links from your page as an example. The <iframe> starts hidden (by CSS) and each link will show the <iframe> and then load the remote site. I added a close iframe link to simulate the close link you have under the <iframe> on your site.
Hope this helps!
Edit: Updated the demo link to include the callback part. Somehow missed that when I read the question!
Edit 2: Your changeIframeSrc function was not working was because it was defined inside the jQuery anonymous function and is a closure. See calling Jquery function from javascript
I would catch the .load() event for the iframe, this will fire after the document has been loaded in to the iframe.
$(".iframe").load(function { /* code to run when iframe is loaded */ });

Detaching/opening an iframe into a new window

I have an iframe setup within a page and basically want to know whether it's possible to have a button in this iframe and when pressed, opens the iframe into a new browser window, showing the contents of the iframe.
I am planning on using either JavaScript or jQuery to achieve this. I am using IE6.
$('.button').click( function(){
window.open($('iframe').attr('src'),'mywindow','width=400,height=200');
});
For what you need (to open the same page where this button), no matter if it's an iframe or if in the home page.
The only difference is if you want that data to open in new window, are a reflection of the same page, such as data that can be an input.
If you care about who are the same data:
$("#mybuttonOpenWin").click(function(){
window.open(window.location.href);
});
If you are interested, you can try this code:
$("#mybuttonOpenWin").click(function(){
var mref = window.open(window.location.href);
(function = onReadyRef(xref){
if(xref.window.document.readyState=="complete"){
$(xref.window.document).find("body").html($("body").html());
}
else{
onReadyRef.call(this, xref);
}
})(mref);
});

Categories