Iframe and browser back button - javascript

I have a main page that contains several iframes and those iframes also have multiple iframes. iframes load with dynamic data.now the requirement is that when i click on the back button of browser then that give an alert(this functionality is not allowed). so that the previous iframe can't load. so how can i do this??

Based on iFrame purpose which is an HTML document embedded inside another HTML document. So an IFrame behaves like a window with its own independent content. In jQuery I did this and works for me. hope that would be useful.
$(window.parent.window).on('popstate', function () {
//Some codes
});
But should know that "popstate" event of the window is fired when the active history entry changes. So it works for both backward and forward navigation.

assuming you have no prior condition to check iframe content
window.onbeforeunload = function() {
return 'this functionality is not allowed';
}

Related

Can I refresh my parent window when closing the popup?

I want to refresh my parent window when I close the popup.I could use following
window.opener.location.reload();
But my requirement is slightly different in that I have to write all this code for refreshing the parent page in the parent page itself.
I cannot write a single line of code in the popup.
Thanks,
The only way I know is by checking child window status at frequent intervals but this is explained clearly in this question
That said, I don't know if that could be an alternative, but using a lightbox instead of a new window popup would allow you to keep full control on your events as the whole thing stays in the same window.
Most lightbox API's offer that kind of functionality (loading an external site in the lightbox instead of the usual image), using dynamically generated iFrame to display the external site. This solution also have drawbacks (e.g.: frame-busting code on site loaded in lightbox) but can look nicer than a plain old new window...
I've been using Shadowbox on projects for quite some time now and always liked it, but there are plenty of others out there, maybe even better.
You need to handle the unload event handler in the pop-up and do the reloading in the main window. In the main window, add JavaScript:
function popUpClosed() {
window.location.reload();
}
In the pop-up:
window.onunload = function() {
if (window.opener && !window.opener.closed) {
window.opener.popUpClosed();
}
};
So the answer to your question is generally no, if you need your code to work in all browsers, in particular IE.

Event firing when iframe loaded

I'm trying to set up event, which should fire when iframe is loaded. It is important to acknowledge, that I want this event to fire INSIDE iframe, not in parent page. Actually, parent doesn't have to know that iframe was loaded.
On the beggining I've tried $(function() {....} (document.ready) event, but it doesn't seem to work as expected. It seems that it fires when parent page was loaded (the same event on parent page works as expexted).
Then, I've tried window.onLoad = function() {...} but it doesn't seem to work at all (event not fired).
So, how to do that? Again, I'd like the page inside iframe to know that loading was complete. Basically, I'd like to have event, that will work in iframe page as $(function() {}) in parent page.
I am afraid you can't do this in a right way.
See this link : How to add onload event to a div element?
May be somebody should post the ticket to github.
If you own the page being loaded into the iframe, put the code in the page being shown in the iframe, not the parent page. If you do not own the page being loaded into the iframe, you cannot do what you're attempting due to cross-domain security sandbox restrictions. You would need a CORs solution http://en.wikipedia.org/wiki/Cross-origin_resource_sharing

Prevent browser from keeping iframe url when reloading the parent

I have a form inside an iframe. As soon as the user saved the data I redirect the iframe to a page that does nothing more than reloading the main page (as some other content depends on what was inserted inside the iframe). So the data outside the iframe ist updated and the form should appear again.
The problem: at least firefox (haven't tested it in other browsers yet) keeps the "new" url of the iframe with the redirected page and not the one that is set by sourcecode. Something similar to autocompletion with input fields.
I do the reload by
parent.location.reload();
Is there maybe a way to force a real reload without keeping any information from the history of the containing iframes?
btw: I may use jQuery if it helps.
Thanks.
You could try something along these lines (http://jsfiddle.net/AKykZ/):
document.querySelector('button').addEventListener('click', function() {
document.querySelector('iframe').setAttribute('src', document.querySelector('iframe').getAttribute('src'));
window.top.location.reload();
return false;
}, false);
In the fiddle, click the link in the iframe, and hit the reload button. It sounds like you're reloading from the iframe, but this should at least get you on the right track.
Found the solution. It is pretty funny but doing the reload by
parent.location.href = parent.location.href;
makes a fresh reload of the page without keeping the history. Haven't tested it in other browsers though.

Parent redirect when using iframe

I know there are several questions/answers already about how to redirect a parent window from within an iframe, but this one has a slight twist.
I need to be able to redirect the parent window when the page in the iframe is changed. However, the page in the iframe is not on my domain, so I can't use the parent.window.location trick that was suggested in other threads.
So, for example, if I put stackoverflow.com in my iframe, I need the parent frame to redirect when the user clicks any link on the stackoverflow page.
I doubt this is actually possible, but I thought there might be some sort of polling of the iframe that the parent can do or something.
This is a bit convoluted, but should do the trick. If you define your IFRAME like this
<iframe id="xMyIframe" src="http://someurl" onload="replaceLoad(this)" ></iframe>
Then you can define a JavaScript code;
function replaceLoad(oIframe) {
oIframe.onload = function () {
location.href = 'http://www.microsfot.com'
}
}
On load of the initial Iframe URL inital onload event handler fires which replaces itself with new handler that will fire after next load i.e. after user clicks link in the iframed page.

Check DOM element in Google Chrome Extension

I am trying to make a simple Google Chrome extension - like finding a specific element on the page and display an alert.
My problem is that the specific page loads relatively slow (having also some AJAX behind).
How can I make my check only when all the page is loaded?
I tried "run_at" : "document_idle" in my manifest file, but with no success. It shows me the message, before the whole page loads.
I was thinking to check every second (or something) the whole DOM elements, but is this a feasible solution? I think it will slow down the page...
Thanks.
If that element does not exist on the page when you click "view source", then one way of catching it would be listening to DOMSubtreeModified event, which fires each time DOM is modified:
document.addEventListener("DOMSubtreeModified", function(event){
if(document.getElementById("my_element")) {
//element is added
}
});
Have you tried to put your code in window.onload event in "content_script.js"?
window.onload = function() {
// your code
};

Categories

Resources