Question

我还没有完成网络开发足够长的时间来了解它的所有限制，但我需要在更大的窗口中显示iframe而不重新加载其中的html。我只想使用javascript / css，我不确定从哪里开始。

目前我有一个iframe点击事件，当点击它将加载一个jquery-ui对话框，其中包含来自iframe的相同html ..但是对话框内的页面会加载我以前在iframe中运行的所有javascript等。

标题

<!-- 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>

谢谢你的帮助！

Answer 1

这是一个简单的小提琴：http://jsfiddle.net/d2Lmtqce/1/

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

基本上，我刚为您的iFrame创建了一个容器。此容器由jQuery UI dialog()方法使用。

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

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

仅使用css放大iframe而不重新加载html内容

1 个答案: