Skip to content Skip to sidebar Skip to footer

Dynamic Iframe In A Pop Up Window

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 wa

Solution 1:

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


Post a Comment for "Dynamic Iframe In A Pop Up Window"