My page contains two iframes. Both iframes represents a single page applications that contain routes for different views.
E.g.
parent window (contains the iframes): http://mypage.com
iframe1: http://mypage.com/#case/1
iframe2: http://mypage.com/#register/2
Each iframe contains a button that, when clicked, should display the entire iframe content in the iframe parent's window.
Now I wanted to assign the href attribute of an iframe's location object to the iframe's parent location object:
window.parent.location.href = window.location.href;
This code is executed inside the iframe obviously. But when executing it , the iframe reloads http://mypage.com. The parent window doesn't get reloaded at all.
Somehow the parent frame didn't reload by assigning a new URL to window.parent.location.
Additionally, I had to call reload() to get the page doing an actual reload.
window.parent.location.reload();
Related
My goal is to change a fill attribute in a polyline element in an svg sitting in a nested, same-domain, iframe.
When my page loads, I can see the content in the browser. In the chrome console, from javascript, I can access the nested iframe, and the div containing the svg.
document.querySelectorAll('iframe#my-frame')[0]
.contentDocument.querySelectorAll('iframe')[0]
.contentDocument.querySelector('#mydiv')
but the content of that div is evidently not in any dom that I can interrogate. The div is effectively empty, even though it's content is rendered in the browser.
<div id="mydiv"></div>
When I right-click > 'Inspect' the nested iframe, the devtools redirect to the body element of the iframe#document. I am now able to interrogate the div, and manipulate the svg elements' attributes. At this point I can no longer interrogate the parent page, because the window object is now the nested iframe itself--this is not unexpected.
But I can't reset window programmatically, I don't think, i.e., this doesn't work:
window = document.querySelectorAll('iframe#my-frame')[0].contentDocument.querySelectorAll('iframe')[0].contentWindow
Is there a way to programmatically change focus or window of the javascript running in the browser--what I assume is forcing the iframe content into the dom in order to manipulate a css attribute after page load? Remember this is not an iframe domain issue.
You can't access the iframe's content instantly
You need something like a load eventListener to wait until the <iframe> content is fully loaded.
const myFrame = document.querySelector("#my-frame");
myFrame.addEventListener("load", (e) => {
// content loaded - query and manipulate elements
let doc = myFrame.contentDocument;
let iframeSvg = doc.querySelector("svg");
let svgEl = iframeSvg.querySelector("rect");
svgEl.style.fill = "green";
});
I have an iframe within an iframe. So Iframe-2 is within Iframe-1.
How do I link from iframe-2 to iframe-1 without going all the way out to parent window and then clicking to reopening iframe-1?
window.parent.location.href = \"target_link";
I'm new with iframe interactions with parent, so let me explain the issue I'm facing in simple terms:
I have a site with an iframe. How can I use JavaScript or jQuery code to dynamically change my parent URL depending on what the user clicks in the iframe?
For example, if my parent URL is parent.com?page=1¤cy=eur then my iframe will automatically be iframe.com?page=1¤cy=eur, but the user can click another link inside the iframe. If the user clicks on a link and the iframe src changes to iframe.com?page=another_page, I want the parent URL to dynamically change to parent.com/page=another_page or parent.com#page=another_page. In other words, I pass all iframe URL parameters to parent.
Can anyone help me with this?
I have full control over parent window and can add some code to child as well but they're not on the same domain.
Thanks
You can use window.postMessage to achieve interaction between parent-iframe/child window across 2 different domains.
In your case, since your child is modifying your parent, you should set up a listener on your parent page like so
window.addEventListener("message", (event) => {
if (event.origin !== "http://thisisyourchilddomain.com") // You must check for the sender's origin or your website could be exploited !!
return;
// do something
}, false);
And in your child page, you would call the method window.postMessage
parent.postMessage("hello there parent! please perform a redirect with the following params...", "http://thisisyourchilddomain.com");
Note that parent is a global here that you can access from your child. Also, you can pass an object to the first parameter of postMessage({key:value}, ..)
Examples were taken and modified from the link to window.postMessage (mozilla).
I'm trying to append the url of the parent page an iframe is located in based on the current url within the iframe.
This is all taking place on the same domain, so I don't think there should be any security issues.
EDIT:
My code now looks like the following:
function locator_url() {
var iframeUrl = alert(document.getElementById("dealer- locator").documentWindow.location.href);
var iframeUrlSplit = iframeUrl.split('/locator/');
window.location.hash = '#' + iframeUrlSplit[1];
};
$(document).ready(function(){
document.getElementById("dealer-locator").contentWindow.onload = locator_url();
});
Now the default src for the iframe is http://localhost/meade/locator/
The page the iframe is on is http://localhost/meade/dealerlocator/
The code works for the initial page load, the parent url is appended to localhost/meade/dealerlocator/#
However, when I click a link inside the iframe the parent url doesn't change, even though the href value in the iframe has.
The parent url should have it's hash updated to something like:
localhost/meade/dealerlocator/#results_list.php?showonly=US&tab=US&zip=&distance=10&state=&city=&name=
But that's not happening.
What am I missing?
Did you try:
document.getElementById("dealer-locator").contentWindow.onload = locator_url;
Well, if you need click events in your iframe, then you could do it this way:
Car.com
Then locator_url() gets called in the parent page. Same goes for using load events (I mean, load events that occur in the iframe context).
Can Anyone tell me the difference between window.location.href and top.location.href ?
And also where to use which one.
And which one will be better when redirecting after an ajax call in mvc?
window.location.href returns the location of the current page.
top.location.href (which is an alias of window.top.location.href) returns the location of the topmost window in the window hierarchy. If a window has no parent, top is a reference to itself (in other words, window === window.top).
top is useful both when you're dealing with frames and when dealing with windows which have been opened by other pages. For example, if you have a page called test.html with the following script:
var newWin=window.open('about:blank','test','width=100,height=100');
newWin.document.write('<script>alert(top.location.href);</script>');
The resulting alert will have the full path to test.html – not about:blank, which is what window.location.href would return.
To answer your question about redirecting, go with window.location.assign(url);
top object makes more sense inside frames. Inside a frame, window refers to current frame's window while top refers to the outermost window that contains the frame(s). So:
window.location.href = 'somepage.html'; means loading somepage.html inside the frame.
top.location.href = 'somepage.html'; means loading somepage.html in the main browser window.
Two other interesting objects are self and parent.
The first one adds an item to your history in that you can (or should be able to) click "Back" and go back to the current page.
The second replaces the current history item so you can't go back to it.
See window.location:
assign(url): Load the document at the provided URL.
replace(url): Replace the current document with the one at the provided URL. The difference from the assign() method is that after using replace() the current page will not be saved in session history, meaning the user won't be able to use the Back button to navigate to it.
window.location.href = url;
is favoured over:
window.location = url;
top refers to the window object which contains all the current frames ( father of the rest of the windows ). window is the current window.
http://www.howtocreate.co.uk/tutorials/javascript/browserinspecific
so top.location.href can contain the "master" page link containing all the frames, while window.location.href just contains the "current" page link.