CODEWITHSUNDEEP
jqueryfirefoxgoogle-chromeiframedialog
Sukhdev
Sukhdev

Reputation: 21

iFrame within JQuery Dialog loads up empty in Firefox and chrome

Following page shows an iFrame with-in the JQuery dialog. It is a fully working page, you might have to just fix the jQuery and style sheet references on top. I created it in an ASP.NET MVC3 project in visual studio...

<!DOCTYPE html>
<html>
<head>
    <title>Dialog Test</title>
    <link href="../../Content/themes/base/jquery.ui.all.css" rel="stylesheet" type="text/css" />
    <script src="../../Scripts/jquery-1.5.1.min.js" type="text/javascript"></script>
    <script src="../../Scripts/jquery-ui-1.8.11.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        function showDialog() {
            $("#divId").dialog({
                title: 'Test Dialog',
                resizable: false,
                modal: false,
                height: 500,
                width: 500
            });

            $("#myFrame").attr("src", "http://www.google.com");
            return false;
        }
    </script>
</head>
<body>
    <a href="" onclick="return showDialog();">Show Dialog</a>
    <div id="divId" style="display: none;">
        <iframe id="myFrame" name="myFrame" width="100%" height="100%" frameborder="1" scrolling="auto" />
    </div>
</body>
</html>

This code works in Internet Explorer without an issue, however it just does not work in Chrome and FireFox. The iFrame loads up but it is just empty. Please help. I will greatly appreciate any tip/suggestion.

Upvotes: 2

Views: 2018

Answers (1)

asdf_enel_hak
asdf_enel_hak

Reputation: 7640

try this:

function showDialog() {
 ("#divId").dialog({
 //...
 })

 $("#divId").html('<iframe id="myFrame"  src="http://www.google.com" name="myFrame" width="100%" height="100%" frameborder="1" scrolling="auto" />')
return false;
}

Upvotes: 1

Related Questions