I've seen solutions like
top.document.getElementById('iframe_a').src
But the problem is, that I don't know the Iframes ID. My Application is running as a Gmail-Gadget and therefore I don't know which ID Google will generate.
So how can I get the URL of my gadget?
Using JQuery will also be fine.
If your script is executed within an iframe, location.href should do it. You might want to access the location object in more detail tho.
Related
I use an Iframe with an external API, which I don't control. My goal is to add Javascript code in my Website, to change the style of a few elements in the Iframe. First I considered using
document.getElementById(iframeId).contentWindow.document.getElementById(elementId);
but I soon recognized that it will not be successful because I am getting security issues. I tested a bit and found out when I inspect the element in the Iframe, which I want to change, I am able to get the element simply by using:
document.getElementById(elementId);
I don't understand. Why does this technique only work when I inspect the correct element first? And is there any way I can use this trick for my normal JS backend?
Hey guys i really need your help. I am creating some kind of application for dynamically searching multiple items. For example, I want to search specific products in one store via iframe(for example, src will be 'www.store.com/search'), i create a array of all objects which i want to search and i create loop which will change iframe's src('www.store.com/search/item-1', 'www.store.com/search/item-2', etc.). I need to access price for selected item, preferably through iframes dom element. I was trying to access iframes dom element and console with no success (Blocked a frame with origin from accessing a cross-origin frame). I am pretty sure im not headed in the right direction, does anyone have better solution or a way to bypass this?
If you don't control the contents inside of the iframe there is no easy way to do this. The web browser has a security feature (called CORS - https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS) to prevent this sort of interaction for security reasons.
In order for this to be possible the page inside of the iframe needs to be your page, and you need to configure the CORS settings on it to allow being used with an iframe like this.
Goal
I'm making a Chrome extension to perform some manipulations on my university's website since the layout to select a course is bad. For this I need to access elements to read their inner information and also copy their CSS to add certain information that I will obtain from a different site, in a way that fits the style of the page.
Problem
When I open the source code on the exact page I want to use, it doesn't display the correct HTML. Instead it shows the main page's code under the dev tool. The interesting part is that when I highlight a certain element the code shows up and I'm able to make changes within the tool. But if I try to call a specific element under the console using $(id) or $$(id) it would show either null or [].
This causes some problems to because I'm new to any sort of web-related development and I would like to see the complete source so that I can select the elements I want and manipulate the page the way I would like. Maybe there is something I'm overlooking? that's why I need your help.
Possible reasons
I tried many things and try to research and concluded that it might have to do with frames since the url is not changing. However I'm not able to find any resources to teach me about frames (I know nothing about it) if that's the actual problem.
If the problem is another I would appreciate any assistance in solving it or any work around that I am not aware of.
The reason is definitely the use of frames. There are multiple documents at play here, the top level document and each frame has it's own document. This is important because the JavaScript you are executing is 99.9999% the top level document and not a child frame's document. Due to this, it's not finding the DOM nodes because it doesn't search the frames' documents.
Background: I have written a bookmarklet (JavaScript) that appends an iframe to the current page you are viewing. This iframe's src attribute is pointing to a form back on my application.
Problem: I am trying to utilize addEventListener to detect if that form has been submitted. However, I don't seem to be able to access the elements within the iframe.
For example:
document.getElementById(remote_form_id).addEventListener("submit",afterSubmit,true)
does not work because the getElementByID call is returning null.
My current work-around is to add an event listener on the iframe to listen for a "load" action and then call an intermediary function that ups a counter because I know how many times the iframe will be loaded before I need to call afterSubmit().
document.getElementById(marklet_iframe_id).addEventListener("load",listenForSubmit,true)
function listenForSubmit(){
if (count==1){afterSubmit();}
count++;
}
Basically, I'm looking for a best practice cause this is a crap approach.
Although it doesn't work in IE, you may want to look at the postMessage method of the pages' window objects. It allows you to asynchronously send string data between windows, even when direct access would be forbidden by the same-origin policy.
You can do something like this:
var doc = document.getElementById(marklet_iframe_id).contentDocument;
var form = doc.getElementById(formId)
form.addEventListener("submit", afterSubmit, true)
Try the EasyXDM library which uses the best-available techniques in a given user's browser to achieve this. It also is "best practice-y" in that its goal is to send messages between windows, and it's up to those windows to handle the messages, which mimicks the postMessage functionality available in HTML5 browsers.
I have data in a iframe. When a user performs an action - I want this want this data to be collated and sent "inside" another iframe inside this iframe.
I have having a bit trouble achieving this and was wondering whether its possible and if it is, how I can do it ?
Thx
A quick solution would be to pass instructions (actions, variables, etc) as query variables in a url. You can use your outside script to change the iFrame reference and a script inside the iFrame can read back those variables and do something with them.
Basically starting with http://someurl.com/page.html in your iFrame and dynamically changing it to http://someurl.com/page.html?action=do-something&with=this. Since we're talking Javascript, you can force the iFrame to refresh asynchronously, giving the illusion that it's loading new, interactive data.
I has this problem a while ago and did not find any solution. As I remember, you cannot control an inner frame from its owner due to some security concerns.
Later Edit: you might be able to synchronize them by using an intermediate component (such a database) - this is how I ended with my issue