Hi I am trying to select form tag using Jquery from the link below in chrome console:
http://www.dcoi-conference.org/#!registration/cpq5
I tried:
$("form")
This gives empty array
Here I see the form element is in iframe. Thus I also tried
$("iframe")[0].contents();
But was uanable to get any results.
Please help.
The form in that page is in an iframe that comes from a different origin than the page. So, the browser security model will not allow you to access the iframe DOM from the parent page.
Without moving the content out of that foreign domain or placing code into that foreign sourced iframe, there is no way to work around that security limitation from just the parent page.
Possible solutions:
Stop embedding an iframe from a foreign domain because there is no way to get to the content of a cross origin iframe. Put the content into your own page directly where you can access it freely.
Add code to the foreign domain that will cooperate with the parent page. Cooperating cross origin frames can communicate via window.postMessage(), but it requires cooperating code in both frames in both domains.
Related
I've just been wondering where the boundry for scripts of the iframe contents lie. Which element is the highest parent of the iframe contents. The iframe itself or the "html"
I tried the following but then I realize the scripts inside the iframe can't access the iframe element properties, and no warning is thrown.
The following script resides inside the iframe.
<script>
$(document).ready(function(e) {
$(document).on('click', '.subscribe_submit', function(){
console.log($('.iframe').attr('data-test'));
//////////// data-test returns undefined for this.
</script>
while the iframe is like this.
<iframe data-test="$2y$12$PPuMZWPdy.zhaVnGWV7SD.Tqhw87qLe4e.vaTtWuIccxLrUFu/cda"></iframe>
*This is cross-origin.
*In data-test, is not a password, I just used the PHP password API to encrypt that string.
The browser window owns all.
frames are a property of the window and within frames are separate windows.
Similarly the document for your page is a property of the window.
Browser security rules dictate what you are or aren't allowed to do based on the domain of the main window as well as what frames are allowed to do with regard to interacting with any higher level window.
Within your page (document) you should have no problem accessing the iframe tag and setting or getting attributes. There are however frame blocking headers that pages can set to prevent being loaded within another frame
Need more details to troubleshoot why you aren't able to get the value of the data attribute
The host page owns the iFrame element. If the contents are on another domain, the contents are bounded at their own "window" which sits inside the iFrame.
I have a website with an iframe on one page that goes to an external URL (which I have no control over). I am trying to find a way to have all the links in the Iframe (not the entire page) open in a new window. I've tried a couple solutions with no luck. Is there a way I can target the iframe and use the HTML base tag?
Due to the Same Origin Policy, you can only modify the contents of an iframe if the domains and protocols match.
I am developing a webpage which our customers want to insert on their websites by wrapping my page in an iframe (cross domain). I don't need to interact with the parent or know anything about whats outside the iframe.
I am using HTML, CSS, Javascript and Webservices.
Question: How am I limited inside an iframe compared to if my page was running outside the iframe?
You're not. Any JS linked within the iframe from your domain will act in the context of the iframe. Aside from being crammed into an unusual container it should work the same as it would if it was loaded independently.
If your needs should change however, there are ways to send signals between parent frame and iframe if both pages have JS written to cooperate. There's methods using the # in URLs which can be read by the parent and don't force page reloads and I believe they share the window.resize event which can be fired manually without actually resizing the window.
UPDATE: There are far better ways to communicate between cross-domain iframes now than there used to be. Naturally you'll still require cooperating JS on both ends but you can use window.postMessage rather than triggering messages via window.resize and data after a hash symbol in the URL. That was a cool trick though.
When creating links you should have in mind to maybe use the target-attribute of the a-tag if you want to create a link for the parent window. Otherwise the new page would be loaded into the iframe.
I'm trying to get the contents of an <iframe> from another page.
The other page is a different website; I'm logged into that website and I get its contents and store it in the <iframe>.
How do I get the contents of that <iframe> into the current window ?
The short answer: you can not do it. Browsers restrict the interaction between content from different websites using the same origin policy.
Can the iframe access its parent if I changed its src to "about:blank" after loading it in the parent page?
Note: the iframe is in another domain not the same as the parent page.
No. If you change the src attribute of the frame to about:blank the content of that frame will be replaced with the blank document, and any javascript running inside the iframe will terminate.
If you need a way for the two to communicate, one of the ways to go is to expose some kind of JSON based endpoint that can be called from one of the domains, while the other polls for a result.
UPD: Regarding your pronto question, I would guess they don't use an iframe. Pronto is a bookmarklet, which allows code to run in the "outer" page. While I didn't verify this, I'd guess they are able to make the browser page load their JS library via an injected script element, and display their UI that way.
Generally, no. This is known as cross-site scripting (XSS) and is considered a security risk, so most browsers prevent it.