Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Target iframe elements 1

Status
Not open for further replies.
ca8msm

ca8msm

Programmer
May 9, 2002
11,327
GB
I have an iframe on my page:
Code: 
<iframe id="myframe" name="myframe" src="[URL unfurl="true"]http://externalsite.com/page.html[/URL] "/>
And I want to target a select element in it's page and set it's selected value (the name attribute has been added as that was one of the suggestions given to be able to access the frame).

I can't get the syntax correct to access the document within the frame. I've tried several suggestions such as:

Code: 
var iframe = window.frames[0];
iframe.document.getElementById('TheSelect')....
Code: 
myframe.document.getElementById('TheSelect')....
but none of these seem to be able to access the document. Is this deemed as Cross Site Scripting and is that why I can't access it, or is it just the syntax I have wrong?

Thanks,
Mark



-------------------------------------------------------

Mark,
[URL unfurl="true"]http://aspnetlibrary.com[/url]
[URL unfurl="true"]http://mdssolutions.co.uk[/url] - Delivering professional ASP.NET solutions
[URL unfurl="true"]http://weblogs.asp.net/marksmith[/url]
 
Sort by date Sort by votes
With id stand ready, try this.
[tt]
var iframe = document.getElementById("myframe");
iframe.contentWindow.document.getElementById('TheSelect').value="xyz"; //with xyz existing as one of the option's value
[/tt]
 
Upvote 0 Downvote
Thank you for your reply tsuji, however using that syntax, Firefox reports an error:
Error: iframe has no properties
Source File: Line: 51
Click to expand...
If I add an alert in, it returns null:
Code: 
    var iframe = document.getElementById("myframe");
    alert(iframe);
So, I assume that the iframe cannot be found with getElementById method, which is the behaviour that some other posts I've found have said.


-------------------------------------------------------

Mark,
[URL unfurl="true"]http://aspnetlibrary.com[/url]
[URL unfurl="true"]http://mdssolutions.co.uk[/url] - Delivering professional ASP.NET solutions
[URL unfurl="true"]http://weblogs.asp.net/marksmith[/url]
 
Upvote 0 Downvote
Mark, your suggestion with the frames collection in your first post should have worked. Try assigning a name to the frame and accessing it via the frames collection by passing the name as the parameter. Here's a working test:
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<script type="text/javascript">

window.onload = function () {
   var a = window.frames["i"];
   alert(a.document.getElementById("t").value);
};

</script>
<style type="text/css"></style>
</head>
<body>

<iframe src="blah.html" name="i"></iframe>

</body>
</html>

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<script type="text/javascript"></script>
<style type="text/css"></style>
</head>
<body>

<input type="text" value="test" id="t" />

</body>
</html>

-kaht

Lisa, if you don't like your job you don't strike. You just go in every day and do it really half-assed. That's the American way. - Homer Simpson

[small]<P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <.</B>[/small]
 
Upvote 0 Downvote
Thanks kaht, that proves that the syntax works. It looks as though I do have a cross site issue though as when I substitute the "blah.html" page for an external site, trying to access the id of one of those fields results in the error:
Error: uncaught exception: Permission denied to get property HTMLDocument.getElementById
Click to expand...


-------------------------------------------------------

Mark,
[URL unfurl="true"]http://aspnetlibrary.com[/url]
[URL unfurl="true"]http://mdssolutions.co.uk[/url] - Delivering professional ASP.NET solutions
[URL unfurl="true"]http://weblogs.asp.net/marksmith[/url]
 
Upvote 0 Downvote
Yeah, you can't access elements from a page in an iframe that resides on another domain...

-kaht

Lisa, if you don't like your job you don't strike. You just go in every day and do it really half-assed. That's the American way. - Homer Simpson

[small]<P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <.</B>[/small]
 
Upvote 0 Downvote
That's a shame. I have to include a link to an iframe page and I just wanted to pre-select an item from a select list. I guess if I want to do that, I may have to scrape the HTML server-side and output it directly to my page.

Thanks for your help anyway kaht.


-------------------------------------------------------

Mark,
[URL unfurl="true"]http://aspnetlibrary.com[/url]
[URL unfurl="true"]http://mdssolutions.co.uk[/url] - Delivering professional ASP.NET solutions
[URL unfurl="true"]http://weblogs.asp.net/marksmith[/url]
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

JScannell
  • Locked
  • Question
Making elements visible during an onChange() event
Replies
3
Views
108
vacunita
vacunita
LyndonOHRC
  • Locked
  • Question
How do I Hide/Show options elements by class
Replies
1
Views
64
ChrisHirst
ChrisHirst
noodles57
  • Locked
  • Question
reset select box from within an iframe?
Replies
1
Views
78
ChrisHirst
ChrisHirst
litton1
  • Locked
  • Question
Find dynamic elements 1
Replies
5
Views
117
litton1
litton1
cmayo
  • Locked
  • Question
Group &amp; collapse elements based on field value
Replies
5
Views
109
cmayo
cmayo

Part and Inventory Search

Sponsor

Back
Top