Solved

How to capture the url of an image inside an iframe ?

Posted on 2004-03-22
25
819 Views
Last Modified: 2006-11-17
Dear all,

My code is like this

<html>
<body>

<iframe src="http://www.test.com/test.asp?id=123"></iframe>

</body>
</html>

the resulting iframe will be a jpg and I need to capture its url, which will be something like http://www.test.com/output_123.jpg .

can I use Javascript to capture it ?  if yes, how ?

Thanks for helping.
Cristy


0
Comment
Question by:cristy56
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 11
  • 8
  • 4
25 Comments
 
LVL 12

Expert Comment

by:lil_puffball
ID: 10654946
Not sure I fully understand, but try this:

<iframe src="http://www.test.com/test.asp?id=123" id=ifr></iframe>
<button onclick="alert(document.getElementById('ifr').src);">Get URL</button>
0
 
LVL 5

Author Comment

by:cristy56
ID: 10655005
Hi lil_puffball,

Thanks for your reply, but it is not exactly like this.

I try your way and then the src will return to be "http://www.test.com/test.asp?id=123" , but what I want is to get the output of "http://www.test.com/test.asp?id=123" , which will be a jpg call http://www.test.com/output_123.jpg, I want to capture the jpg url instead of the iframe source.

I have tried
<button onclick="alert(document.getElementById('ifr.img').src);">Get URL</button>
but it doesn't seem to have this property ??

Cristy
0
 
LVL 12

Expert Comment

by:lil_puffball
ID: 10655075
What is the html of "http://www.test.com/test.asp?id=123"??? How does it "call" the jpg?
0
Creating Instructional Tutorials  

For Any Use & On Any Platform

Contextual Guidance at the moment of need helps your employees/users adopt software o& achieve even the most complex tasks instantly. Boost knowledge retention, software adoption & employee engagement with easy solution.

 
LVL 12

Expert Comment

by:lil_puffball
ID: 10655132
Do you mean the page writes something like "<img src=http://www.test.com/output_123.jpg>" to the iframe?
If so, maybe this will work: (it will only work if there is nothing between "img" and "src", if there are other properties, make sure to include them)

<script>
function getURL(txt){
var spos=txt.toLowerCase().indexOf("<img src=")+"<img src=".length;
var epos=txt.toLowerCase().indexOf(" ",pos);
return txt.substring(spos,epos);
}
</script>

<iframe src="http://www.test.com/test.asp?id=123" id=ifr></iframe>
<button onclick="alert(getURL(document.getElementById('ifr').innerHTML));">Get URL</button>
0
 
LVL 5

Author Comment

by:cristy56
ID: 10655133
the test.asp is just a sample, the logic is it gets some parameter and then returns a jpg to the resulting html.
Because I am not the one writing the test.asp part, I have no code on hand to show you, sorry about this.

so the resulting html will only have

<html>
<body>
<img src="test_123.jpg">
</body>
</html>

I have tried
<button onclick="alert(document.getElementById('ifr').images[0].src);">Get URL</button>
but is still not working, do u know why ?

Actually there is only one jpg and nothing else in the output of the test.asp



0
 
LVL 12

Expert Comment

by:lil_puffball
ID: 10655145
Never mind, that didn't work.

If you can give the image a name, like so:

<img src=http://www.test.com/output_123.jpg name=img>

then the following code will work:

<iframe src="test6.htm" id=ifr></iframe>
<button onclick="alert(window.frames.ifr.document.images('img').src);">Get URL</button>
0
 
LVL 12

Expert Comment

by:lil_puffball
ID: 10655150
Well, this worked for me:

<iframe src="test6.htm" id=ifr></iframe>
<button onclick="alert(window.frames.ifr.document.images[0].src);">Get URL</button>
0
 
LVL 12

Expert Comment

by:lil_puffball
ID: 10655157
Oh, I see now, you were missing the .document in your code...
0
 
LVL 5

Author Comment

by:cristy56
ID: 10655178
error : pos is not yet defined ??
0
 
LVL 12

Expert Comment

by:lil_puffball
ID: 10655182
Yeah, my first code was messed up, try my last one. :)
0
 
LVL 5

Author Comment

by:cristy56
ID: 10655186
but I cannot "name" to the img in the putput html :( , so what should I do ?
0
 
LVL 5

Author Comment

by:cristy56
ID: 10655189
sorry for all the inconvenience caused
0
 
LVL 12

Expert Comment

by:lil_puffball
ID: 10655199
I meant my last LAST one (I had 3 codes...):

<iframe src="test6.htm" id=ifr></iframe>
<button onclick="alert(window.frames.ifr.document.images[0].src);">Get URL</button>
0
 
LVL 5

Author Comment

by:cristy56
ID: 10655425
still not working :(
it said :Access denied ??
0
 
LVL 5

Author Comment

by:cristy56
ID: 10655449
Maybe I should clarify my question a bit.

First of all, I got an html, inside there is an iframe,
the src for this iframe is some script (e.g test.asp?id=123) that will return a jpg in the output.

however, the test.asp?id=123 is not hosted in my server, but it is located in other web server.

What I need to do now is, I need to capture the output jpg of the test.asp?id=123, the output jpg actually differs everytime.

I have tried all the above method. And I found the following problem.
if the iframe src is just a normal htm, everything works fine. But if it is a asp or some other scriptlets, that I would not be able to capture the image url with the above method and the error is access denied.

is that any good suggestion now ? thanks lil_puffball for helping :)
0
 
LVL 5

Author Comment

by:cristy56
ID: 10655451
P.s. To be precise,  I need to capture the url of the output jpg each time
0
 
LVL 30

Accepted Solution

by:
third earned 125 total points
ID: 10655707
for security reasons, you are not allowed to do that.

workaround is to rename your html file to hta (i.e. html application) but you can only run this on your local pc not on the web. tell me if this is what you want.


grabber.hta
---------------
<html>
<body>
<form name="test1">
<input type="text" name="text1" value="test1">
</form>
<iframe src="http://www.google.com" name="myframe"></iframe>
<a href="#" onclick="alert(document.myframe.document.images[0].src);">click</a>
</body>
</html>
0
 
LVL 30

Expert Comment

by:third
ID: 10655717
opps, remove the form tags. those are not necessary. 'twas from a previous test. ;-)
0
 
LVL 5

Author Comment

by:cristy56
ID: 10655831
I have the htm running on the web and not my local PC.

Why is this security reason again ?? I can also get the image name if I right click on the jpg inside the iframe. Is there really something to deal with secuirty ?
0
 
LVL 5

Author Comment

by:cristy56
ID: 10655868
Hi all,

test.hta
============
<html>
<body>
<iframe src="http://www.test.com/servlet?id=12"  name="myframe"></iframe>
<a href="#" onclick="alert(document.myframe.document.images[0].src);">click</a>
</body>
</html>
=============

the above output is exactly what I want, but how can I turn it to an htm or someother format that can be run on web server ?
0
 
LVL 30

Expert Comment

by:third
ID: 10655905
as i have mentioned earlier, you cannot do that from a web server.
0
 
LVL 5

Author Comment

by:cristy56
ID: 10655910
then is there any other way round, or using other method ?
0
 
LVL 30

Expert Comment

by:third
ID: 11055269
IMO, 'no' is still an answer so why delete it?
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article shows how to create and access 2-dimensional arrays in JavaScript.  It includes a tutorial in case you are just trying to "get your head wrapped around" the concept and we'll also look at some useful tips for more advanced programmers. …
In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

728 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question