Access child iFrame DOM from parent page - javascript

Here is the deal:
domain.com/page -- Parent page (document.domain=domain.com) contains an iframe
sub.domain.com/page -- Child iframe (document.domain=not set) is on a subdomain
Is there any way to access the DOM of that iframe or am I out of luck?
Does same origin policy block me from forcing a document.domain on an iframe contained within a parent page? I suppose that would defeat the purpose of the same origin policy... If that is the case, is there any workaround to access the DOM of the iframe on the rendered parent page?

There is a way. When the page in the iframe loads, have it do the following
parent.childGetElementById = function (id) {return document.getElementById(id);}
parent.childLoaded();
This will make a function in the global scope of the parent page (that contains the iframe). Then in the parent, just have the following
function childLoaded() {var dom = childGetElementById('someid');}
This is along as you have control of the page your loading into the iframe... if you do not, you are out of luck.

This is a browser security measure, otherwise everybody would be wrapping your banking websites and skimming off your passwords when you logged in.
You can talk from the iframe to the parent, but not back into an iframe again.

You're out of luck, as far as I know. You can talk between them using the hash-bang in the URL though, see this for a decent discussion.

Related

Change element style on a image inside a iframe

Is there a way to change the element-style of the img inside the iframe using jquery. The iframe epubjs-iframe change the id on every page load. What I want is to change the style = heigh="98%" to max-height:467 and width:auto on every page load.
Html-code
Yes, IF the src of your iframe is pointing to SAME domain.
Eg.
var iframe = $("#iframe"); // Selector to get the iframe
$("#elemInIframe", iframe.contents()).css("color", "blue"); //Or whatever method you want
And Of course, if the src of iframe is in different domain, due to security reasons, You will not be able to access the contents in javascript. Sorry about the same!!
Not know if it is the case here, but when working with iframes You may need to overcome Same Origin Policy: https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy
You can use PostMessage for cross-frame communication. To do so:
You need to be in control of the code both host page and embedded one
Or use the PostMessage API provided by page You want to embed
More about PostMessage: https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage

unable to access child iframe DOM from parent webpage

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
}

Complete isolation of javascript in the iframe from the same domain

Assume we have a window and an iframe with some javascript in it. The iframe sourcecode is defined directly in "srcdoc" attribute of the iframe.
Is it possible to somehow force the browser to behave like the iframe is loaded from another domain?
I mean I don't want the javascript in the iframe to be able to access the main window via "window.parent" or anything like that, because the iframe contents is not trusted. But the problem is that it's stored on the same domain and I even want to use the same request to load both the main window and the iframe contents (with that "srcdoc" attribute).
So is it possible at all?
Thanks!
You could prepend the string:
"<script> parent = top = null; </script>"
To the srcdoc. That should prevent the rest of the code in the srcdoc form accessing the parent through window.parent and window.top.
I'm not sure if there are any other ways to access the parent of an iframe.

How do I check if a textfield in iframe is empty?

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")

Changing the contents of an iframe

I have an iframe embedded on my webpage and I'd like to edit certain parts of it using javascript. Is this possible and how would I do it?
Since the iframe is loading content from another domain — no. You'll hit the same origin policy.
According to the HTML DOM spec (level 2), you can reach the child DOM by using the .contentDocument property of the iframe's DOM node.
But, of course, no browser lets you do that across domains anymore...
You can get the iframe document by doing this:
document.getElementById(iframeId).contentDocument
That is if you own the page loaded in the iframe.

Categories