Solved

Retrieve the url by mouseover a link in a page loaded in an iframe

Posted on 2007-11-30
4
376 Views
Last Modified: 2010-01-29
Hi experts,
I made an html application (.hta) which acts as a toolbar of a website which is loaded into an iframe. When browsing the website (a webshop) I can retrieve all kind of data from the loaded page and there are options, for example, to reload the webpage on a different server.
Because it's an hta there is no status bar. Now I'm missing information about the hyperlinks in the loaded webpage. A link added to the website via the CMS is dynamically changed into a hyperlink as used on the webpage. So when hyperlinks go wrong it is needed to see what the system has done with it.
In a normal browserwindow you can easily mouseover the link and the statusbar is showing the full url.
As said, there is no statusbar and I wonder if its possible to retrieve this information on a different way.
It would be great if could write the url to a textfield in the parent toolbar , by mouse over a link in the loaded website.

Below there is some samplecode:
The toolbar:

<html>
<head>
<title>Test</title>
<HTA:APPLICATION APPLICATIONNAME="Test">
</head>
<body>
<form name="showurl">
Now you're pointing to: <input type="text" name="url" id="url" size="30">
</form>
<iframe id="theshop" name="theshop" src="website.html"></iframe>
</body>
</html>

A page loaded into this toolbar, with two links:

<html>
<head>
<title>Webpage</title>
</head>
<body>
<a href="http://www.google.com">Google</a>
<br>
<a href="http://www.yahoo.com">Yahoo</a>
</body>
</html>

So the idea is to mouse over the link on website.html and show it on the form in toolbar.hta
This should be done by code in the toolbar, I can't add code to the webpage code

Thanks in advance!
Waldemar
0
Comment
Question by:Wirwar
[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
  • 2
  • 2
4 Comments
 
LVL 12

Expert Comment

by:Sinoj Sebastian
ID: 20387152
You mean Like this
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<body >
<form name="showurl">
Now you're pointing to: <input type="text" name="url" id="url" size="30">
 
</form>
	<script type="text/javascript"> 
		function link(theFrame) {
			allLink = theFrame.contentDocument.getElementsByTagName('a')
			for(i = 0;i< allLink.length; i++) {
				allLink[i].onmouseover = function showthelink() {top.document.getElementById('url').value=this.href;}
			}
		}
	</script>
<iframe id="theshop" name="theshop" src="inde.x.html" onload="link(this);">
</iframe>
 
</body>
</html>

Open in new window

0
 

Author Comment

by:Wirwar
ID: 20387728
I'm not sure.. reading the code it looks good (I didn't know the contentDocument property)  but I'm getting a javascript error "contentDocument is empty in line 10"  (I entered the correct url in the iframe, the website.html from my original question)
The error appears both in the 'toolbar' loaded as hta  or loaded as html like in your example code.
I tried a few changes in the code, but still getting the error.




0
 

Author Comment

by:Wirwar
ID: 20387826
A little more research brought me to a small change in the code: contentWindow
Now it works exactly as described!
Thanks!


<html>
<head>
<title>Test</title>
<HTA:APPLICATION APPLICATIONNAME="Test">
<script type="text/javascript"> 
	function link(theFrame) {
		allLink = theFrame.contentWindow.document.getElementsByTagName('a')
		for(i = 0;i< allLink.length; i++) {
			allLink[i].onmouseover = function showthelink() {top.document.getElementById('url').value=this.href;}
		}
	}
</script>
<style>
iframe#theshop {height: 500px; width: 800px;}
</style>
</head>
<body>
<form name="showurl">
<input type="text" name="url" id="url" size="100">
</form>
<iframe id="theshop" name="theshop" src="http://www.amazone.com/" onload="link(this);"></iframe>
</body>
</html>

Open in new window

0
 
LVL 12

Accepted Solution

by:
Sinoj Sebastian earned 100 total points
ID: 20387964
Glad to help you to make it work
Happy coding      :)
0

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Learn by example how to specify CSS selectors for Selenium WebDriver test automation software.
An enjoyable and seamless user experience can go a long way on an eCommerce site. While a cohesive layout and engaging copy play roles in creating a positive user experience, some sites neglect aspects that seem marginal but in actuality prove very …
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…
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…

738 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