I was assigned a task to open a web page in iframe and user can navigate to inner pages in the iframe. But my task is to get the URL of inner page of iframe using Javascript or Jquery.
Let me explain the issue clearly,
I have a Webpage (say abc.corp.com) and I'm displaying one more webpage (say bcd.corp.com) using iframe. Basically both are from "corp.com" but I'm unable to access the child iframe DOM, we are getting permission denied access while trying to access the iframe object.
The child iframe page (bcd.corp.com) is developed and maintained by other team and we don't have access to the webpage.
We tried to change the document.domain property of both parent page and child iframe page to same domain "corp.com" but we cant modify the child iframe page domain.
Please provide a workaround for this issue.
Thanks in advance
"unable to access child iframe DOM from parent webpage"
I think that's one goal of an iframe, to separate the DOM's. But, you can get access with something like this.
function getIFrameDom( referenceToYourIFrame ) {
return frameRef.contentWindow ? frameRef.contentWindow.document : frameRef.contentDocument
}
Related
I need to find the alert inside the child I frame from the parent.
And inside I frame i am keeping the another web page which i don't have access on it so i cant get the alert displayed inside I Frame.
So,how to find the alert message inside I frame from Parent.
You can't. The contents of an iframe cannot be accessed if the parent and child are served from different domains. If they could, it would be possible to wrap any 3rd party page and capture passwords etc from it.
The only way to communicate cross-domain requires you to have control of the iframe contents. If you can add a script then you can use postMessage to send events etc in both directions.
I have issue with accessing iframe that is inside another iframe.
I was trying something like this:
window.getElementById("parentIframe").contentWindow.document.getElementById("childIframe").contentWindow
But id did not worked (in my browser console i get something like "Inaccessible")
I want to know if there is a way to access nested iframe window object ?
To make things harder top parent window is on different port then iframe content. (So we have CORS to block any access from child iframe content)
Another issue is that i have no way to modify middle iframe content.
I can only embed another iframe inside of it.
My question is about accessing iframe that is inside another iframe NOT ABOUT CORS reletaed issues.
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
Is there any way by which I can make the parent document access the iFrame DOM but avoid the iFrame from accessing parent DOM? That is, I want only unidirectional access from my parent to the iframe DOM. My use-case is that I am trying to install Facebook conversion pixel on a webpage that I own. I dont want the facebook javascript (fbds.js) to access my DOM, so I am creating a new webpage on my domain, loading the facebook javascript into the newly created page, and loading the new page in an iFrame on my original webpage . Now I need to restrict that iframe from accessing parent DOM (for security) but allow my parent to trigger javascript functions in the iFrame window (to track events).
Pretty much the question sums it up. I'm trying to do something similar to Gmail, where if you've entered stuff in a text field then the website will prompt you to to confirm if you want to leave the page.
But what if the text field in question is in an iframe? Obviously I can assign the iframe an id, but is there any javascript command or something that can check if a field in an iframe is empty or not? Is this even possible?
Edit: The iframe source and page the iframe is embedded in are from the same domain.
var value = document.getElementById('iframeID').contentDocument
.getElementById('theTextBoxId').value;
And yes, it's possible, you just need to get access to the <iframe> document with contentDocument.
From the DOM iframe element, scripts can get access to the window object of the included HTML page via the contentWindow property. The contentDocument property refers to the document element inside the iframe (this is equivalent to contentWindow.document), but is not supported by Internet Explorer versions before IE8.
Scripts trying to access a frame's content are subject to the same-origin policy, and cannot access most of the properties in the other window object if it was loaded from a different domain.
MDN
Just set onbeforeunload as you would as if the iframe'd page were the top-level page. If you try to navigate away in the parent frame or the child frame, it will be interrupted by the confirmation.
Using JQuery you can access the iframe content:
$("#iFrame").contents().find("#text")