displaying an alert box inside an iframe in an html page

Question

There is a simple HTML page, named say abc.html. Now abc.html has a button named say 'click me'. This page, abc.html, also has an iframe, with an id say 'myframe'.

Now what i want is that when the button, 'click me', is clicked an alert box should come up inside the iframe named 'myframe'. How can i do this?

I have tried the following..

window.frames[0].contentWindow.alert("this is the iframe");

but this does not seem to work. Please let me knwo why does this not work and what could be an alternate solution.

If the IFRAME-contents are loaded from another URL, you can't access/modify those contents via JavaScript. — feeela, Aug 27 '12 at 10:11
ok .. but i do not want to modify/access the contents of the page loaded from a different URL into the iframe. I just want to display an alert box in the window object of the iframe. Is it possible? — qre0ct, Aug 27 '12 at 10:14

score 2 · Accepted Answer · edited May 23 '17 at 12:15

2

ContentWindow is derived from document, not window.

What you will want to do is add the alert into a function on the iframe page, then use document.getElementById('targetFrame').contentWindow.targetFunction(); to call it, (using targetFunction as example). This answer may give you further information on techniques.

edited May 23 '17 at 12:15

Community

1
1

answered Aug 27 '12 at 10:13

jett

1,276
2
14
34

you say contentWindow is derived from document and not window, but as per W3cSchools tutorials, contentWindow is a property of the iframe object. And secondly the iframe loads a diffrent URL that i do not have control on. Hence i can not modify the contents of the iframe. – qre0ct Aug 27 '12 at 10:19
As a hack for this, just make a new page containing full page frame to where your iframe is; and add the javascript in to the page. And you're correct, but elements in the page are derived as subclasses from the document class, so my statement is also correct but in an abstract way. – jett Aug 27 '12 at 10:46
thanks jett... but do you mind elaborating a little on your hack. – qre0ct Aug 27 '12 at 10:59
create a new file called inlinepage.html, inside this file create a frame that points to where your iframe currently points to. make this fullscreen. add a script into this page as well, with a function for an alert box. now, have your iframe point to inlinepage.html, and you should be good to go. – jett Aug 27 '12 at 12:10

score 1 · Answer 2 · answered Aug 27 '12 at 10:41

1

If the source of the <iframe> comes from a different domain than the parent page, the you are going to hit browsers same origin policy, meaning that you simply cannot do anything with that page.

For an "alternative suggestion" it really does depend on exactly what you are trying to achieve, and what the user is supposed to experience.

answered Aug 27 '12 at 10:41

freefaller

19,368
7
57
87

Ok. here's what i really want to do. I want to actually check if the scroll bar on the iframe has scrolled, when the page in the iframe loads, or not. To do this i though of using the pageXOffset and the pageYOffset of the window object. Now i am wondering if the window object returned by the iframe also supposrts these properties or not. Hence to check this, i tried to simply use the alert method with the window object returned by the iframe. – qre0ct Aug 27 '12 at 10:52
@geek, not sure you understand me... the same origin policy means you **cannot do anything with that page**. That includes both updating and detecting - you can access nothing – freefaller Aug 27 '12 at 10:54
ok i do understand the same origin policy constraint. So there's no way by which i can detect if the iframe window has scrolled after the page gets loaded in the iframe ? – qre0ct Aug 27 '12 at 10:58
@Geek, not that I'm aware of... and if there is, I will eat my hat! – freefaller Aug 27 '12 at 11:00
You might be able to edit your htaccess file or Nginx config file to allow cross-origin requests (they might be required to be subdomains on the same parent domain, and you definitely need to own both and be able to edit those files). – Ryan Jun 16 '16 at 02:00

score 1 · Answer 3 · answered Aug 27 '12 at 13:35

1

Browser-level alert is not visibly tied to a particular frame. You will always get an alert that is centered on the browser window, rather than centered on the window/frame it is called from.

JSFiddle demonstrating this

If you need this functionality, you'll have to use your own modal dialogues, or a library that will present them.

answered Aug 27 '12 at 13:35

Ryan Kinal

17,414
6
46
63

1

(Major picky alert) It is in Chrome... the title bar of the alert box states `The page at xxx says:` – freefaller Aug 27 '12 at 13:40
Good point! I apparently don't pay *any attention at all* to alert titles. – Ryan Kinal Aug 27 '12 at 13:41
To be honest I thought it did on other browsers as well, but it isn't in FF12 or IE9 that I've quickly tested on. Alerts are like traffic signs, the more you see the more you ignore! – freefaller Aug 27 '12 at 13:42

score 0 · Answer 4 · edited Aug 27 '12 at 13:28

0

This might helpful to you:

function body_load()
{       
    document.getElementById('loader').src;
}

<div id='mydiv'>
    <input type="button" value="Click Me" onclick="body_load();" />
</div>
<iframe id='loader' onload="body_load(this)" name="Google"  scrolling="auto" style="width:95%;height:600px" src="http://www.image.com"></iframe>

http://jsbin.com/idazul/1/edit

edited Aug 27 '12 at 13:28

bfavaretto

71,580
16
111
150

answered Aug 27 '12 at 10:16

Nikhil D

2,479
3
21
41

even this does not seem to work dude. And in any case how would it matter if i use document.getElementById('loader').contentWindow.alert("this is the iframe"); as suggested by you or if i use window.frames[0].contentWindow.alert("this is the iframe"); as i had tried i nmy attempt. Both are after all doing the same thing. – qre0ct Aug 27 '12 at 10:24
when u call this alert on button click right..so whats wrong happen – Nikhil D Aug 27 '12 at 10:25
on button click the alert box does not come up. Does not come up at all, neither in the main window nor in the iframe. – qre0ct Aug 27 '12 at 10:31
no... dude... that is not what i want. what i want is a simple alert box inside an iframe. This iframe when it loads it has the home page of some other site. – qre0ct Aug 27 '12 at 10:42
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/15842/discussion-between-geek-ji-and-nikhil) – qre0ct Aug 27 '12 at 10:49

displaying an alert box inside an iframe in an html page

4 Answers4

Linked