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

Enlarge iframe without reloading html contents using only css

本文关键字：新加载 加载 内容 html css iframe 放大      更新时间：2023-09-26

我还没有做足够长的时间来了解它的约束，但我需要在更大的窗口中显示一个 iframe，而无需在其中重新加载 html。我只想使用javascript/css，我真的不确定从哪里开始。

目前我有一个 iframe 单击事件，单击该事件时将加载一个具有与 iframe 相同 html 的 jquery-ui 对话框......但对话框中的页面加载了我之前在 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>

谢谢你的帮助！

这是一个简单的小提琴： 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>
相关文章：