2

我向上和向下搜索，但我无法找到允许我使用以下代码调整页面高度的答案：

// Set path to the iframe file
var filePath = 'http://www.mysite.com/widget/widget.php';
// Setup the iframe target
var iframe='<iframe id="frame" name="widget" src ="http://www.mysite.com/widget/widget.php" width="100%" height="100%" marginheight="0" marginwidth="0" frameborder="no" scrolling="no"></iframe>';
// Write the iframe to the page
document.write(iframe);

var myIframe = parent.document.getElementById("frame");
// Setup the width and height
myIframe.height = 450;
myIframe.width = 255;

myIframe.src = filePath;
// set the style of the iframe
myIframe.style.border = "1px solid #dddddd";
myIframe.style.padding = "2px";

请注意将myIframe.height = 450;我的小部件限制为 450 像素高的“”...我需要它来允许我的小部件调整为 100%，是的，我尝试了“100%”，但它不起作用。

当我将此代码放在创建一个简单小部件的站点上时，会提取上面的代码。

<script language="JavaScript" src="http://www.mysite.com/widget/js/javascript-iframe.js" ></script>

这是原始 javascript iframe 小部件的来源： http: //papermashup.com/creating-an-iframe-with-javascript/ 但他们没有关于如何拥有 100% 高度的说明

4

1 回答 1

3

这对我有用。诀窍是获取页面可见区域的高度，而不仅仅是高度：这是因为主体高度跟随其自身内部的内容，如果你有一个固定的元素高度，主体高度不会变小而是变大

$(window).resize(function () {
    //frame height
    var f = $('#frame').height();
    //window visible height <-- height css(height) and other works for the real height, not just the visible
    var h = window.innerHeight; 
    //give some pixel less to let the iframe fit the screen
    var something = 5;
    //if h is less then 450, resize the iframe 
    if (h < 450 ){
        $('#frame').height(h- something);
        console.log($('#frame').css('height'));
    }else{
        //else, if the iframe height is less then 450, make it bigger
        if(f<450){
            $('#frame').height('450');
        }   
    }
});

无论如何，如@timo所示，最好避免 document.write

于 2013-05-28T22:46:48.097 回答