CODEWITHSUNDEEP
javascriptcsshtml
user3461957
user3461957

Reputation: 163

Accessing div of parent window

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.

Upvotes: 0

Views: 59

Answers (1)

Quentin
Quentin

Reputation: 943128

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.

Upvotes: 1

Related Questions