Happy new year :)
I have a Chrome extension which is a popup that contains an iframe, inside that iframe i load a whole web app. my question is
How can i communicate with the code inside that iframe form popup.html or from the background page? I would need to either read DOM elements inside that iframe or better be able to make js calls to different methods.
Thanks for all the help!
Use a content script that loads inside that frame. They can access the DOM of that page and make calls to the background page, though it's a bit harder to be able to communicate with the JavaScript on that page - but DOM elements should be fine if you control both the iframe and the extension.
See http://code.google.com/chrome/extensions/content_scripts.html
Related
does anybody know how can I expand javascript so that it targets whole website not only the page in iframe it is on. Im currently using a javascript for gallery on my website, so when you click on a picture it pops up enlarged, however since the page with javascript is in an iframe it shows only in the iframe, how can I accomplish the pop up to expand to the whole page?
Thanks in advance.
Iframes can call out to the window which embeds them using simple javascript (see window.frames on http://www.w3schools.com/jsref/prop_win_frames.asp). However, if src of the iframe is on a different domain, then the script can only affect the iframe, due to security policy within the browser.
If you'd like to apply a work-around, there are some solutions like this: Yet Another cross-domain iframe resize Q&A
These solutions tend to break on different browsers and with updates to browsers.
Your best bet is keeping the entire iframe contents within the browser by writing the iframe code yourself (and hosting on your own domain).
I have content. They are all different (generated from widgets on Wordpress), and they all need to be pulled apart and concatenated in various ways. Basically on window.load, the javascript loops through each of the widgets, takes out the content, then puts them in clean containers in a specific order, then fades them in nicely. This works perfectly.
In comes Twitter. Twitter has a script that loads an iframe. The Twitter script is inside a widget. I'm doing the same thing, taking the contents of the widget and dumping it into a new container. This causes it such that I'm taking the Twitter script and putting it into a new container before the iframe has loaded. Somewhere along this journey, the iframe never loads. I don't want to manipulate the content inside the iframe by an means, I just want it to load in the container I choose.
My question is: is this process wrong? Or, can I get the iframe to load first, THEN grab the contents of the iframe and dump it in another container? It seems as if the iframe doesn't load until the page is loaded, but my javascript is interrupting the load process and stopping.
I'm not sure if I'm explaining this correctly, nor do I have example code that is in simplified form. Is this question answerable without these things? Thanks for the help in advance.
Edit: Taking out window.onload solved the problem. Meaning, window.load was probably interrupting the iframe from loading. However, window.load is necessary. Any other ideas?
So, the answer to my question :
Or, can I get the iframe to load first, THEN grab the contents of the iframe and dump it in another container?
No. Currently, there's no way to do this. See reference The Twitter script was firing right away, and the window.onload was being rightfully interrupting.
The Twitter embed script is in two parts: an element and the inline script. My workaround was to keep the script inside the javascript, and keep the element in the widget (so the client can switch off, have multiple twitter account embeds, etc). Then, after the DOM elements are finished shuffling around and into their respective containers, I insert the script into the widget for twitter.
The iframe load, and tada! No more half-loaded twitter 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
});
});
I was studying how Disqus and other embedded wigets are implemented, and I came to realize that they don't use an enclosing iframe where all their widget is run. What they do is to append elements dynamically to the embedding page through JavaScipt and then run almost every form or button in some iframe. What's the point of doing this? Couldn't they just wrap everything in an iframe and then change the parent window URL (to allow navigation) through some kind of cross-domain messaging system such as easyXDM? Can anybody point out some benefits that arise from having some elements not inside an iframe?
Code inside an iframe may not be able to set cookies as browser thinks it is an advertisement.
Iframe content cannot control the size of the outside iframe, so iframe needs to be created with javascript and javascript needs to be loaded externally so that external site has total over iframe size.
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.