How to Show the Pop up in iframe outside? - javascript

I have one page(say jobs.html) with an iframe loads another page( say joblist.html).There is one another popup(which displays description of job when clicks one title) which is generated with javascript will be load into the page in iframe when it loads.
I have to load the popup(job description popup) outside the iframe.
Any solution to get the jobs.html page's document body using javascript?
or How can i get this popup outside the iframe?
Thanks,

You can use the parent function.
You can define the function of showing the popup on the parent page. not in iFrame and call that function from iFrame.
Lets suppose you have a function of showing job description in Parent page.
var showJobDesc = function(jobTitle,jobDesc,...){
....
}
now in iFrame call this function like;
parent.showJobDesc(jobTitlem, jobDesc, ...);
By doing this you have no issues for placement/alignment of the Dialog.

I have to load the popup(job description popup) outside the iframe
What do you mean when you say load the popup outside the iframe?
If you want to open the other page in a pop up, use window.open
If you want to open the new page replacing the parent's page, use the location of the window
window.parent.location.href = "newPage.html"
In general, you can refer to the parent window (the window containing the iframe), use window.parent (and therefore the parent window's document as window.parent.document, and any script in the parent window as window.parent.scriptName)

Put the show javascript into container page, and in the iframe just call parent.showpopup().

parent.showpopup() throws an access denied error. Kinda makes sense since including an iframe means the developer of the page can control the page it's contained in.

Related

Reference to immediate parent of a popup in javascript

I am opening a popup in my web page using JavaScript. From the popup, I access an element in the parent page using windows.parent.document.getElementsById("...") and this gets me the required element, which I can then process.
Now, there are couple of occasions when the web page is opened in another page using an IFrame. For this, the above JavaScript breaks, as windows.parent points to the outermost page (which contains the IFrame).
Q: How do I get a reference to the immediate parent page of a popup in JavaScript, when the parent page is opened from another page via IFrames?
Edit
What we are doing now is get the element using document.getElementsById("...") from the page calling the popup and then pass this value to the popup. Wanted to to know if there are any other elegant way to get the reference.
What you want is
window.opener

Would it be possible to intercept all redirects and open the contents in a new window/pop up?

So I have a page that contains an iframe. Inside the iframe, there are links that opens up new page in the same window (self.location.href) (window.open(urlstring,'false') etc...etc...
Is there a way that I could force all links inside this window to open up their contents in a new window/pop up? Overrides their redirect settings and without changing the code inside the iframe?
The reason I'm asking this is because that, I think the iframe page still references the parent window as their window, therefore, when the function like "window.self.open" was triggered, it took my whole parent window away...
Maybe anyway to embed the iframe as an separate window inside the page? Just not sure how to avoid the same window referencing...
Thanks!
You can set the links to open in a new window by adding target="_blank" to the a element (e.g. Example).
If you want to have this applied to all links without touching the links themselves, you can include a jquery function to do it for you:
$("a").attr("target","_blank");
You could also add the target attribute to a base-tag within the header.
<base target="_blank">
This will be applied to all links as well.

Extend Fancybox inside an iFrame to outside

I got stuck in a problem here. I have a fancybox inside an iFrame, and it works normally, but I need it to extend outside the iFrame so it can fill the whole screen (I mean extend to it's parent).
Does anybody knows how to do that?
If both the page and the iframe are in the same domain, you can open the fancybox window in the parent from inside the iframe. Check out the demo.
Parent Window (contains fancybox script, css and iframe)
<iframe src="child-page.htm" height="250" width="500"></iframe>
Child Page (contains script to call fancybox in the parent)
$('a').click(function() {
// target the parent window (same domain only)
// then call fancybox in the parent
// You can add any HTML you want inside the fancybox call
window.parent.$.fancybox('<img src="http://farm5.static.flickr.com/4058/4252054277_f0fa91e026.jpg" height="333" width="500">');
});
It's not possible. Iframes are independent pages and can only interact to the parent via JavaScript, and even then it's shady behavior.
Your fancybox cannot extend out of the iframe no matter what you do, but with some work you could call to one on the parent page via JavaScript.
This post will answer your question in both directions (parent -> iframe, iframe -> parent): Invoking JavaScript code in an iframe from the parent page
As a side note, iframes fell out of vogue about 5 years ago. I'd avoid them in any new production.
Cheers. :)

What javascript code/library can I use to open a Pop up on browser window from a small iframe contained in the webpage?

I want to open a remote url inside a javascript popup instead of doing window.open().
I came across libraries like lytebox,lightbox,thickbox which do that if the popup is opened from main webpage.
However my requirement is to open the popup from the link which occurs in a small iframe within the main page.( I can not alter the code of the main page, however Iframe webpage is fully in my control)
When I include those libraries in my iframe webpage, it opens the popup, but restricted only
to within iframe.How to make it appear over whole browser window ?
This is what i want : The user clicks on "click here" and it opens a javascript layer,not
restricted to within iframe.
you can just use
parent.document
from the iframe to access the parent window, if it is from the same domain. Otherwise, security concerns are raised.
You can inject the javascript by creating a script element in the parent's document, and then will be able to access the necessary functions.

Javascript and CSS Popups

I've got a question about CSS based popup windows, like those generated by jQuery UI's dialog system, or Colorbox. If I use those (or something like them) to open a popup window to an HTML page and that page has Javascript in it, does the Javascript in the popup window run in its own context, or does it become part of the context of the Javascript in the parent window that opened it? I ask so that I can write the Javascript on both pages (parent and popup) so there is no namespace collision.
Thanks in advance!
Doug
That depends on the type of popup. (I'm assuming we are talking about in-page popups here and not window.open() ones that open a new browser window.)
If it contains an IFRAME in which you load a separate page, then that page will have its own styles. You will have to re-load any CSS and JavaScript files you need.
If it doesn't contain an IFRAME, but just a regular DIV or other element into which content is loaded through AJAX (or directly output in the "parent" HTML page) then the popup will run in the context of the parent page.
If you use real popups (new windows) it is definitly in its own context.
If you use modal windows purely in HTML it depends. It can be an iframe (own context) or injected elements (parent context).
With Colorbox, you can set the iframe property to true and it will load the content in an iframe. This gives the page its own scope. If you don't use an iframe, then the page will be loaded in the context of the current document.
$('a.someLink').colorbox({ href:"somePage.html", iframe: true });

Categories