|
|
|||||||||
|
|||||||||
|
|||||||||
| |
|||
| |||||||||
![]() |
|
|
«
Previous Thread
|
Next Thread
»
|
Thread Tools | Search this Thread | Display Modes |
|
|
|
You eat, breathe and sleep innovation. Build your mobile intelligence with BlackBerry® experts this July. Register Today! |
|
#1
|
|||
|
|||
|
Overwrite self.close function in iframe
I have a page (example.htm) which has an iframe embedded into it, accessing say http://www.example.com/test.htm. Within test.htm there is a close window button that executes the javascript function of self.close(). When this button gets clicked nothing happens because it should be parent.close().
I don't have access to the code on test.htm to change the button from executing the self.close() to parent.close(). Is there any way I can somehow make the self.close() function inherit parent.close() instead? Thanks for any help. |
|
#2
|
||||
|
||||
|
Does the button have any type of ID or class, or any type of identifying characteristics?
It may be possible to manipulate the page with DOM... but if the page isn't your own page, I'd be very careful with doing that. It's a questionable technique and I believe illegal without permission. Why not just show this page as a popup?
__________________
Daryl's Homepage | My Blogroll | My Profile | Firefox supporter! DevArticles Forum Moderator "The net is a waste of time, and that's exactly what's right about it." -- William Gibson |
|
#3
|
|||
|
|||
|
No identifiable characteristics at all.
Code:
<a border=0 href="javascript:self.close()"><img border=0 alt="close window" src="docs/pics/en-us/closethiswindow_button.gif"></a> It's a program hosted on our own server, so no illegal acts going on here . However, the file we're trying to modify isn't a htm file as per the example. It was compiled as an exe cgi-bin file, which we don't have access to modify. We can't use a pop up because we're required to make this into a seamless integration for all of our computers, and most browsers block pop ups. Thanks for following up. |
|
#4
|
||||
|
||||
|
The fact that the layout isn't going to change would make it easier to add stuff and/or modify certain tag's behaviour.
What you may need to rely on, and I usually avoid this, would be using the items arrays. Code:
mytag = document.getElementById('theiframe').getElementsBy TagName('a').item(3);
mytag.location.href = "javascript:parent.close()";
Not positive it will work, although I'm interested in trying this myself. If I have time I'll play around and see what happens. Ignore the spaces that the forum put in my code. |
|
#5
|
|||
|
|||
|
It doesn't seem to be able to read the tags within the iframe. So the line:
Code:
mytag = document.getElementById("iframeid").getElementsByTagName("a").item(0);
returns a value of null. The iframeid was renamed to the actual id I'm using. And item(0) was used because I set up a mock page with a single hyperlink image button. Is this a limitation of getElementByTagName? And/or a restriction of the iframe component? It was worth a shot though. Thanks. |
|
#6
|
||||
|
||||
|
Okay, I've figured something out... Attached is my code.
I've made three functions: one to grab the document element of your iFrame, one to change the text of the button (to prove it works), and one to override the onclick event of the button. For your purposes, you might want to call the third function on the onload of your parent page. The background colour of the iFrame changes to prove you clicked the button. The iframe source: Code:
<html> <body> <p>Clicking close will close this window.</p> <input type="button" onclick="self.close()" value="Close Window"/> </body> </html> The parent window: Code:
<html>
<head>
<script>
function getIframeDocument(id) {
var oIframe = document.getElementById(id);
var oDoc = (oIframe.contentWindow || oIframe.contentDocument);
if (oDoc.document) {
oDoc = oDoc.document;
}
return oDoc;
}
function setText(text) {
oDoc = getIframeDocument("myframe");
oDoc.getElementsByTagName("input").item(0).value = text;
}
function overrideIframeButton() {
oDoc = getIframeDocument("myframe");
oDoc.getElementsByTagName("input").item(0).onclick = function() { parent.window.close(); }
oDoc.body.style.backgroundColor = "#f00";
}
</script>
</head>
<body>
<p>
<input id="textfield" type="text" value="Close Window" />
<input id="myButton" type="button" value="Change Text" onclick="setText(document.getElementById('textfield').value );" />
</p>
<iframe id="myframe" src="iframe.htm"></iframe>
<p><input id="myButton" type="button" value="Override Button" onclick="overrideIframeButton();" /></p>
</body>
</html>
My code above is cross-platform compliant. IE (Win) and Mozilla (1.7) will return the window object inside the iframe with oIFrame.contentWindow. Safari (1.2.4) doesn't understand that property, but does have oIframe.contentDocument, which points to the document object inside the iframe. To make it even more complicated, Opera 7 uses oIframe.contentDocument, but it points to the window object of the iframe. This is why I've made the first function to grab the oIFrame.document Note, Firefox refuses to let the script close the window. Internet Explorer prompted for confirmation. Opera closed the window (tab) as instructed. I tried my best to replicate your situation, I didn't use any ID or NAME attribute on the INPUT tag of the iFrame. Obviously, if I were to do this in a real-world example, with iFrame source code I can update on my own, I would definately advise that as it would be easier to manage. Again, despite it being a compiled EXE that you can't update, be aware that if it is an external vendor's code, there may be illegal implications while modifying the front-end in this way. |
![]() |
| Viewing: Dev Articles Community Forums > Programming > JavaScript Development > Overwrite self.close function in iframe |
| Thread Tools | Search this Thread |
| Display Modes | Rate This Thread |
|
|
|
|