Best IT Recipes

How to get current iframe location?

I created a basic data entry application that allows users to view external content in an iframe and quickly enter data from the same page. One of the data variables is the URL. Ideally, I would like to be able to load the current iframes url into a text box with javascript. Now I understand that this will not happen due to security issues.

Has anyone done anything on the server side? or know about any .Net browser in the browser controls. The ultimate goal is simply to give the user an easy way to retrieve the URL of the page they are viewing in the iframe. It does not have to be an iframe, a browser in the browser would be ideal.

Thanks Adam

+45
javascript dom iframe
Sep 04 '08 at 18:07
source share
9 answers

I did some tests in Firefox 3, comparing the .src and .documentWindow.location.href in an iframe . (Note: documentWindow is called contentDocument in Chrome, so instead of .documentWindow.location.href in Chrome it will be .contentDocument.location.href .)

src always the last URL that was loaded in the iframe without user interaction. Ie, it contains the first value for the URL, or the last value that you set using Javascript from a window containing:

 document.getElementById("myiframe").src = 'http://www.google.com/';

If the user moves inside the iframe, you can no longer access the value of the URL using src. In the previous example, if the user left www.google.com and you do:

 alert(document.getElementById("myiframe").src);

You will still receive http://www.google.com . "

documentWindow.location.href is only available if the iframe contains a page in the same domain as the containing window, but if it is available, it always contains the correct value for the URL, even if the user goes to the iframe.

If you try to access documentWindow.location.href (or something in documentWindow ) and the iframe is on a page that does not belong to the domain of the containing window, this will throw an exception:

 document.getElementById("myiframe").src = 'http://www.google.com/'; alert(document.getElementById("myiframe").documentWindow.location.href); Error: Permission denied to get property Location.href

I have not tested another browser.

Hope this helps!

+49
Aug 07 '09 at 14:44
source share
 document.getElementById('iframeID').contentWindow.location.href

You cannot access the cross-domain iframe at all.

+16
Mar 20 '09 at 16:10
source share

HTA works like a regular Windows application.
You write the HTML code and save it as an .hta file.

However, there is at least one drawback: the browser cannot open the .hta file; It is processed as a normal .exe program. Thus, if you place a link to .hta on your web page, a download dialog will open, in which you will be asked to open or save the HTA file. If this is not a problem for you, you can click "Open" and it will open a new window (which does not have toolbars, so there is no "Back" button, neither the address bar, nor the menu).


I needed to do something very similar to what you want, but instead of iframes I used a real frameset .
The main page should be a .hta file; the other should be a normal .htm page (or .php or something else).

Here is an example of an HTA page with 2 frames, at the top of which there is a button and a text box containing the second frame URL; The button updates the field:

frameset.hta h3>

 <html> <head> <title>HTA Example</title> <HTA:APPLICATION id="frames" border="thin" caption="yes" icon="http://www.google.com/favicon.ico" showintaskbar="yes" singleinstance="no" sysmenu="yes" navigable="yes" contextmenu="no" innerborder="no" scroll="auto" scrollflat="yes" selection="yes" windowstate="normal"></HTA:APPLICATION> </head> <frameset rows="60px, *"> <frame src="topo.htm" name="topo" id="topo" application="yes" /> <frame src="http://www.google.com" name="conteudo" id="conteudo" application="yes" /> </frameset> </html>
  • There is an HTA:APPLICATION tag HTA:APPLICATION , which sets some properties to a file; this is good, but it is not necessary.
  • NEED to place application="yes" tags in frame tags. It says that they belong to the program and should have access to all the data (if you do not, the frames will still show the error that you had before).

topo.htm

 <html> <head> <title>Topo</title> <script type="text/javascript"> function copia_url() { campo.value = parent.conteudo.location; } </script> </head> <body style="background: lightBlue;" onload="copia_url()"> <input type="button" value="Copiar URL" onclick="copia_url()" /> <input type="text" size="120" id="campo" /> </body> </html>
  • You should notice that I did not use the getElement function to retrieve the field; by HTA file, all elements with an identifier instantly become an object

Hope this helps you and others who get to this issue. He solved my problem, which looks the same as yours.

You can find more information here: http://www.irt.org/articles/js191/index.htm

Enjoy =]

+1
May 07 '09 at 18:55
source share

I like your idea on the server side, even if my proposed implementation of this sounds a bit ghetto.

You can install the .innerHTML iframe in the HTML content that you capture on the server side. Depending on how you capture it, you will have to pay attention to relative and absolute paths.

In addition, depending on how the page you grab interact with other pages, this may not work completely (cookies set for the page you grab will not work in different domains, maybe the state is monitored in Javascript ... Many reasons this may not work.)

I don’t think that tracking the current state of the page you are trying to reflect is theoretically possible, but I'm not sure. The site can track all types of server side, you will not have access to this state. Imagine a case where on a page load a variable is set to a random value on the server side, how would you fix this state?

Do these ideas help anything?

-Brian J. Stinar -

+1
Aug 31 '10 at 17:08
source share

I am using this.

 var iframe = parent.document.getElementById("theiframe"); var innerDoc = iframe.contentDocument || iframe.contentWindow.document; var currentFrame = innerDoc.location.href;
+1
Jul 20 '13 at 20:39
source share

So, in this application there is an iframe in which the user is provided with links or some bandwidth that allows the iframe to view some external site. Then you try to grab the URL that the user was viewing.

Something to keep in mind. Since the URL refers to an external source, you will be limited by how much you can interact with this iframe using javascript (or, for example, on the client side), this is called browser cross-domain protection security, as you apparently found There are smart works around, as presented here Cross-Domain, Cross-Frame Javascript , although I don't think this works in this case.

All you can get is the location you need.

I would suggest making the code presented more flexible and less error prone. Try browsing the web for a while with IE or FF configured to display JavaScript errors. You will be surprised only at how many javascript errors are selected, largely because there are many errors prone to javascript errors that continue to grow.

This solution assumes that the iframe in question is the same “windowed” context in which you are using javascript. (This means that it is not embedded in another frame or iframe, in which case the javascript code becomes more active, and you probably need to look recursively in the window hierarchy.)

 <iframe name='frmExternal' id='frmExternal' src='http://www.stackoverflow.com'></frame> <input type='text' id='txtUrl' /> <input type='button' id='btnGetUrl' value='Get URL' onclick='GetIFrameUrl();' /> <script language='javascript' type='text/javascript'> function GetIFrameUrl() { if (!document.getElementById) { return; } var frm = document.getElementById("frmExternal"); var txt = document.getElementById("txtUrl"); if (frm == null || txt == null) { // not great user feedback but slightly better than obnoxious script errors alert("There was a problem with this page, please refresh."); return; } txt.value = frm.src; } </script>

Hope this helps.

0
Sep 06 '08 at 2:10
source share

You can use Ra-Ajax and have an iframe wrapped inside, for example. Window control. Although in general terms I do not urge people to use iframes (for anything)

Another alternative is to upload the HTML code to the server and send it directly to the window as the contents of the shortcut or something like that. Watch how this Ajax RSS parser loads RSS items into a source that can be downloaded here (Open Source - LGPL)

(Disclaimer, I work with Ra-Ajax ...)

0
Dec 02 2018-08-08T00:
source share

Does it help?

http://www.quirksmode.org/js/iframe.html

I tested this only in firefox, but if you have something like this:

 <iframe name='myframe' id='myframe' src='http://www.google.com'></iframe>

You can get its address using:

 document.getElementById('myframe').src

Not sure if I understood your question correctly, but anyway :)

-one
05 Sep '08 at 17:31
source share

You can access the src iframe property, but this will only give you the source URL. If the user is navigating in an iframe, you need to use HTA to solve the security problem.

http://msdn.microsoft.com/en-us/library/ms536474(VS.85).aspx

Check the link using HTA and setting the "application" iframe property, you will get access to the document.href property and analyze all the necessary information, including the DOM elements and their values, if you choose so.

-one
Dec 01 '08 at 23:43
source share


More articles:


All Articles