Accessing div of parent window

Question

Here is scenario I have a file HTMLPage1.html.

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8" />
        <title></title>

        <style type="text/css">

            #UrduPara 
           {
                float: right;
           }
        </style>
    </head>

    <body>
        <div id="UrduPara">
              bla bla bla .....
        </div>

        <iframe src="HTMLPage2.html" width="1000" height="300"></iframe>

    </body>
</html>

Code foe second file HTMLPage2.html is:

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <h1>HTMLPage2.html</h1>
        <script type="text/javascript">
            window.parent.document.getElementById("UrduPara").style.color = "green";
        </script>
    </body>
</html>

As I am trying to change color of div with id of UrduPara in HTMLPage1.html. But it does not work I am getting following error.

Uncaught SecurityError: Blocked a frame with origin "null" from accessing a frame with origin "null". Protocols, domains, and ports must match. HTMLPage2.html:40

Note: I am loading HTMLPage1.html while testing and this is the way I want it to work.

Possible duplicate: http://stackoverflow.com/questions/1654017/how-to-expose-iframes-dom-using-jquery — Andre Pena, Jun 16 '14 at 13:36
Are you opening these via the `file` protocol? That's the only explanation I've ever seen for an origin to be null. — scragar, Jun 16 '14 at 13:37
@user3461957 That will be the issue then, try running it from a proper webserver and the issue should go away. If you're running windows I suggest install XAMPP, linux and Mac users should just install apache. — scragar, Jun 16 '14 at 13:40
Origin refers to where the frame comes from, the file protocol doesn't have one because they're local files, they've not come from any sort of web address. For this site it's `stackoverflow.com`, and only sites who's origin matches are, by default, allowed to access it's contents. — scragar, Jun 16 '14 at 13:44

score 1 · Accepted Answer · answered Jun 16 '14 at 13:40

Blocked a frame with origin "null" from accessing a frame with origin "null".

HTML documents from the file system are restricted from accessing other files for security reasons.

Host your files on an HTTP server. You can install one locally on your development computer.

Accessing div of parent window

1 Answers1