放大iframe，而无需仅使用CSS重新加载html内容

Question

I haven't done web development long enough to know the constraints of it all but I have a need to display an iframe in a larger window without reloading the html inside it. I would like to use javascript/css only, I'm not really sure where to begin with this.

Currently I have an iframe click event that when clicked will load a jquery-ui dialog with the same html from the iframe.. but the page inside the dialog loads all the javascript etc I had ran previously in the iframe.

header

<!-- jquery -->
<script type="text/javascript" src="./js/jquery-1.11.1.min.js"></script>

<!-- html dialog -->
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css">
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>

javascript

<script>
$(document).ready(function() {
    var $dialog = $('#dialog').dialog({
                               autoOpen: false,
                               modal: true,
                               height: 850,
                               width: 900,
                               title: "Some title"
                           });

    $('.iframe-class').load(function(){
        $(this).contents().find("body").on('click', function(event) { 
            //$( "#dialog" ).dialog( "open" );
            var page = "http://localhost/test/graph.html";
            var $dialog = $('#dialog')
                           .html('<iframe style="border: 0px; " src="' + page + '" width="100%" height="100%"></iframe>');

            $dialog.dialog('open');
        });
    });
});
</script>

html

    <div id="frametest">
        <iframe class="iframe-class" scrolling="no" src="/test/graph.html?a=1">
            <p>Your browser does not support iframes.</p>
        </iframe>

        <div id="dialog"></div>
    </div>

thank you for your help!

Answer 1

Here is a simple fiddle: http://jsfiddle.net/d2Lmtqce/1/

function putTheFrameInDialog()
{
    $(function(){
        $('#iframeContainer').dialog();
    });
}

Basically, i've just created a container for your iFrame. This container is used by jQuery UI dialog() method.

<button onclick="putTheFrameInDialog();" value="Hey!">Hey!</button>

<div id="iframeContainer">
    <iframe src="http://www.senado.gov.br/" id="myFrame"/>
</div>