Develop Reference

Make changes in the iframe which is loaded from external

I'm trying to get the links to all images and get them copied with click event in the iframe but it gets loaded from the external server src. I've tried to access the tags inside iframe with contentDocument and contentWindow.document. In the first case I'm getting null value, in the second - "Blocked a frame with origin from accessing a cross-origin frame".
Is there a way to access this iframe and change its content?

Jquery cannot get contents of <iframe> element

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.

Force element to be the topmost element on a page

I have a Chrome extension that injects an iframe to a web page.
The iframe element has a z-index = 2147483647.
There's another extension installed on my Chrome that does something similar (i.e. injects an iframe with z-index=2147483647).
The other extension's iframe shows ON TOP of my extension's iframe.
On Chrome (and I guess on other browsers), the last element on the page will show top-most. (again - assuming z-index is at the highest value).
I tried changing my extension name so it will invoke last (after the other extension is loaded) and therefore having my iframe injected at the end. It did not work, it seems that the other extension also wants to be the top-most.
Is there anyway to make sure my iframe will be injected right before the </body> tag? after any other element has been injected/loaded?
I've seen this answer as well as this one, which did not help.
I thought about setting a timer and then after all elements were loaded adding my iframe, but it seems kinda hacky, and if there's another extension that does the same, we will end up with a timers-fight :).

Chrome extension enable content script to access iframe

Question is simple: Is there any way to enable a content script (through executeScript()) to be able to access an iframe on the current webpage (say stackoverflow.com) that has the same origin of the extension itself?
To put to rest: I realize you can communicate through postMessage, hashing, and so forth from the iframe script to its parent script, but my main goal is to add events onto the iframe directly from a content script rather than having to pass a message (and create a middle man).
I believe injected content scripts run on the page "in their own little world", in which the page itself, nor other content scripts can access, so it leads me to believe Chrome could possibly allow these scripts access to iframes of its own origin (the extension url itself).
EDIT
Just to clarify, the iframe would have a url of the chrome extension itself, under the protocol chrome-extension://. The parent page of the iframe could have any url, say http://stackoverflow.com for instance. So trying to access the iframe from a content script generally wont pass the same-origin-policy...The question is if there is a way around this using Chrome's Extension library.
Thanks!

You can certainly run a content-script on a page and interact with any embedded iframes. I was working on a project recently where I needed to do this.
I don't have a solution in pure javascript so this would require you to include the jQuery.js library, if that works for you.
In the content-script running on the parent page I did the following:
//CAPTURE FRAME LOAD
$("#frameID").load(function () {
//Create an object for the frame
var firstFrame = window.parent.frames[0].document;
//Set JQuery events to run in the context of the frame
$("#buttonID", firstFrame).click(function(){
//Capture click event of a button within the frame
});
});

mobile browser refuses to scroll to # anchor inside an iframe

I have a mobile web site with of a fixed header (divs) and below an iframe in which a page from a different domain is being displayed.
As I wanted a specific area of the page to be displayed inside the iframe after loading I used a pre exsiting #anchor located in the external page by defining the iframe's src with the intended domain of the page + # and the name of the anchor.
It works perfectly on all desktop browsers (in that the page is displayed inside the iframe with the correct line, where the anchor is, at the top of the iframe window), but for some reason when loading the page in a mobile browser (dolphin/Nexus S browser) it doesn't work and all I get is the page inside the iframe as if no anchor was ever defined.. Just the first line of the page at the top of the iframe window...
Any idea why it happens and how to fix it?
Thanks,
Ran.