關於iframe中的按鈕全屏切換

父頁中的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，高度爲當前瀏覽器高度