Question

111

Dynamic iframe in a Pop up Window

rated 0 times [ 118] [ 7] / answers: 1 / hits: 67652 / 12 Years ago, sun, may 6, 2012, 12:00:00

I am trying to achieve 2 things with the href links below. First, I would like to fire-up a pop up window. Done. Next, I would like that pop up window to display an iframe. This was easily accomplished as well until I realized I needed to pass the href link text as a parameter in my iframe src.

So for example, the iframe wont load in my pop up window unless its src=http://localhost:8080/test/document.html?OnSale

I cannot figure out why the document.write in the body of my html page won't print out the dynamic iframe Im trying to create with my foo() function in the href links...

<div id=blanket style=display:none;></div>

    <div id=popUpDiv style=display:none;>

        <a href=#  onclick=popup('popUpDiv')>

            <img align=right src=http://localhost:8080/test/img/close_img.png>

        </a>

<script type=text/javascript> 

    function foo(obj)

    {

        test1 = http://localhost:8080/test/document.html?+obj.text; 

        document.write('<iframe height=450  allowTransparency=true frameborder=0 scrolling=yes style=width:100%; src='+test1+' type= text/javascript></iframe>');

    } 

</div>



<a href=# onclick=popup('popUpDiv');foo(this);>OnSale</a>

EDIT:
Here is my full html page. Everything is running locally on tomcat7 w/ win7 and firefox.

<html>

<head>

    <script type=text/javascript src=http://localhost:8080/test/css-popup/css-pop.js></script>

    <link href=http://localhost:8080/test/css-popup/styles.css rel=stylesheet type=text/css />

</head>

<body>

<div id=blanket style=display:none;></div>

<div id=popUpDiv style=display:none;>

    <a href=#  onclick=popup('popUpDiv')>

        <img align=right src=http://localhost:8080/test/css-popup/x.png>

    </a>

    <script type=text/javascript>

        function foo(obj){

            test1 = http://localhost:8080/test/document.html?+obj.innerHTML;

            document.write('<iframe height=450  allowTransparency=true frameborder=0 scrolling=yes style=width:100%; src='+test1+' type= text/javascript></iframe>');



        }

    </script>

</div>



<a href=# onclick=popup('popUpDiv');foo(this);>OnSale</a>

</body>

</html>

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

dominics

Add To Favorites

Follow

Total Points: 424

Total Questions: 99

Total Answers: 107

Location: South Korea

Member since Fri, Sep 11, 2020

4 Years ago

dominics questions

1 react setState() not triggering re-render

Wed, Apr 6, 22, 00:00, 2 Years ago

1 export a variable inside a function to be used in other modules

Mon, Feb 7, 22, 00:00, 2 Years ago

1 how to make TextInput with dropdown/picker in react-native?

Thu, Jan 13, 22, 00:00, 2 Years ago

1 How to remove extra empty space and scroll bar at the bottom of my html page?

Wed, Jan 20, 21, 00:00, 3 Years ago

1 AgGrid: applyColumnState is not a function

Fri, Sep 18, 20, 00:00, 4 Years ago

View All

answered 12 Years ago kayle · Accepted Answer

text is not a standard for all browsers, try innerHTML instead of that,

function foo(obj){

     test1 = http://localhost:8080/test/document.html?+obj.innerHTML; 

     document.write('<iframe height=450  allowTransparency=true frameborder=0 scrolling=yes style=width:100%; src='+test1+' type= text/javascript></iframe>');

}

UPDATED after you had shared your whole code,

As I understand you want to open a popup window, and show an dynamically created iframe in it. But document.write works for your current window. So you have to handle your popup window at first. then change content of that.

try this,

<html>

<head>

<script type=text/javascript src=http://localhost:8080/test/css-popup/css-pop.js></script>

<link href=http://localhost:8080/test/css-popup/styles.css rel=stylesheet type=text/css />

</head>

<body>





<div id=blanket style=display:none;></div>

    <div id=popUpDiv style=display:none;>

        <a href=#  onclick=popup('popUpDiv')>

            <img align=right src=http://localhost:8080/test/css-popup/x.png>

        </a>

<script type=text/javascript> 

    var popUpWindow;

    function popup(n) {

       popUpWindow = window.open(n);

    }

                function foo(obj){

                test1 = http://localhost:8080/test/document.html?+obj.innerHTML; 

                popUpWindow.document.write('<iframe height=450 allowTransparency=true frameborder=0 scrolling=yes style=width:100%; src='+test1+' type= text/javascript></iframe>');



                } 

        </script>

</div>



        <a href=# onclick=popup('popUpDiv');foo(this);>OnSale</a>



</body>

</html>

And here is working live DEMO