Access child window elements from parent window using Javascript

I need to access child window elements from parent window. I have written the sample snippets below.

Parent HTML:

<html>
<head>
<title>Parent</title>
<style>
div{
float:left;
cursor:pointer;
}
</style>
<script type="text/javascript">
var SubpopUpWin="";
function Opennew(passedURL){
    SubpopUpWin = window.open("popups.html", '_blank','toolbar=no,status=no,menubar=no,scrollbars=yes,resizable=yes,copyhistory=yes');  SubpopUpWin.document.getElementById("ifrm").src=passedURL;  
SubpopUpWin.document.getElementById("ifrm_title").innerHTML=passedURL;  

}
</script>
</head>
<body>
<div onclick="Opennew('')">Google</div> 
<div onclick="Opennew('')">Yahoo</div>
<div onclick="Opennew('')">Bing</div>
</body>
</html>

popups.html

<html>
<head>
<title>Child</title>
<style>
div{
float:left;
}
</style>
</head>
<body>
<div>
  <div id="ifrm_title"></div>
  <div style="margin-top:20px">
   <iframe id="ifrm"  src="" width="470" height="270" frameborder="0" style="margin-top: 34px" scrolling="no"></iframe>
  </div>
</div>
</body>
</html>

In the above code is not working. Even I have used the below script also.

<script type="text/javascript">
var SubpopUpWin="";
function Opennew(passedURL){
    SubpopUpWin = window.open("popups.html", '_blank','toolbar=no,status=no,menubar=no,scrollbars=yes,resizable=yes,copyhistory=yes');
  SubpopUpWin.onload=function(){
     SubpopUpWin.document.getElementById("ifrm").src=passedURL;     
     SubpopUpWin.document.getElementById("ifrm_title").innerHTML=passedURL;     
  }
}
</script>

The above code also not working. Please share your sugestions/solutions...

Thanks

I need to access child window elements from parent window. I have written the sample snippets below.

Parent HTML:

<html>
<head>
<title>Parent</title>
<style>
div{
float:left;
cursor:pointer;
}
</style>
<script type="text/javascript">
var SubpopUpWin="";
function Opennew(passedURL){
    SubpopUpWin = window.open("popups.html", '_blank','toolbar=no,status=no,menubar=no,scrollbars=yes,resizable=yes,copyhistory=yes');  SubpopUpWin.document.getElementById("ifrm").src=passedURL;  
SubpopUpWin.document.getElementById("ifrm_title").innerHTML=passedURL;  

}
</script>
</head>
<body>
<div onclick="Opennew('http://www.google.')">Google</div> 
<div onclick="Opennew('http://www.yahoo.')">Yahoo</div>
<div onclick="Opennew('http://www.bing.')">Bing</div>
</body>
</html>

popups.html

<html>
<head>
<title>Child</title>
<style>
div{
float:left;
}
</style>
</head>
<body>
<div>
  <div id="ifrm_title"></div>
  <div style="margin-top:20px">
   <iframe id="ifrm"  src="" width="470" height="270" frameborder="0" style="margin-top: 34px" scrolling="no"></iframe>
  </div>
</div>
</body>
</html>

In the above code is not working. Even I have used the below script also.

<script type="text/javascript">
var SubpopUpWin="";
function Opennew(passedURL){
    SubpopUpWin = window.open("popups.html", '_blank','toolbar=no,status=no,menubar=no,scrollbars=yes,resizable=yes,copyhistory=yes');
  SubpopUpWin.onload=function(){
     SubpopUpWin.document.getElementById("ifrm").src=passedURL;     
     SubpopUpWin.document.getElementById("ifrm_title").innerHTML=passedURL;     
  }
}
</script>

The above code also not working. Please share your sugestions/solutions...

Thanks

Share asked Mar 7, 2012 at 11:49 Madhan 1,3213 gold badges21 silver badges35 bronze badges

how about passing the passedURL to popups.html as a query string? – scibuff Commented Mar 7, 2012 at 11:54
I didn't check with that... But we can access the parent window elements from child window easily using window.opener . – Madhan Commented Mar 7, 2012 at 11:59
well, the DOM of the new window won't be available immediately; try using setTimeout – scibuff Commented Mar 7, 2012 at 12:02
Yes, I am aware of that. But setTimeout also not working... – Madhan Commented Mar 7, 2012 at 12:08
By using query string it works... – Madhan Commented Mar 7, 2012 at 12:37

| Show 1 more ment

1 Answer 1

Sorted by: Reset to default 7

I feel this is because of some security. You can try this way instead:

<html>
<head>
    <title>Parent</title>
    <style>
        div {
            float: left;
            cursor: pointer;
        }
    </style>
    <script type="text/javascript">
        var SubpopUpWin = "";
        var testUrl = "";
        function Opennew(passedURL){
            testUrl = passedURL;
            SubpopUpWin = window.open("popups.htm", '_blank', 'toolbar=no,status=no,menubar=no,scrollbars=yes,resizable=yes,copyhistory=yes');


        }
    </script>
</head>
<body>
    <div onclick="Opennew('http://www.google.')">
        Google
    </div>
    <div onclick="Opennew('http://www.yahoo.')">
        Yahoo
    </div>
    <div onclick="Opennew('http://www.bing.')">
        Bing
    </div>
</body>

<html>
<head>
    <title>Child</title>
    <style>
        div {
            float: left;
        }
    </style>



</head>
<body>
    <div>
        <div id="ifrm_title">
        </div>
        <div style="margin-top:20px">
            <iframe id="ifrm" src="" width="470" height="270" frameborder="0" style="margin-top: 34px" scrolling="no">
            </iframe>
            <script type="text/javascript">

        document.getElementById("ifrm").src = window.opener.testUrl;

    </script>
        </div>
    </div>
</body>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

Access child window elements from parent window using Javascript - Stack Overflow

Parent HTML:

popups.html

Parent HTML:

popups.html

1 Answer 1

与本文相关的文章

评论列表(0)