关于iframe中的按钮全屏切换

来源：互联网发布：业绩考核软件编辑：程序博客网时间：2024/06/05 08:13

父页中的iframe标签。

$('<iframe id="iframes" src="' + url + '" width="100%" height="' + ($.browser.msie ?document.body.clientHeight - 20 : (document.body.clientHeight - 120)) + '" frameborder="0" marginheight="0" marginwidth="0" border="0" scrolling="auto" ></iframe>');

iframe子页中的全屏按钮

var fullScreen = $('<img style="cursor: pointer;position: absolute;bottom:14px;right:2px;z-index:1001;"  src="/Content/images/full-screen.png" />');    fullScreen.toggle(function () {        $(this).attr('src', '/Content/images/reduction.png');        parent.$('.admbg').children().hide();        parent.$('#main_display').show();        parent.$('#divProcessSpaceNavigator').hide();        _topbarContent.hide();        parent.$('#iframes').css({            position: 'absolute',            left: 0,            top: 0,            height: parent.document.documentElement.scrollHeight        });    }, function () {        $(this).attr('src', '/Content/images/full-screen.png');        parent.$('.admbg').children().show();        parent.$('#divProcessSpaceNavigator').show();        _topbarContent.hide();        parent.$('#iframes').removeAttr("style");        parent.$('#iframes').attr('height', parent.document.documentElement.scrollHeight-120);    });

要点：

1、隐藏父页面中的相应内容

2、将iframe样式设置为绝对定位，top=0，left=0，高度为当前浏览器高度

0 0