Question

我看到很多关于调整iframe大小的问题，但所有这些都无法访问外部网址。在这种情况下我做。我可以在head标签中插入一个脚本。我试图使用插入到包含iframe的主页面标题中的这个脚本（我知道开始和结束帧标签是错误的 - 它不会让我留下它们：

iframe id="frame-one" scrolling="no" frameborder="0" src="yoursitehereexample"        onload="FrameManager.registerFrame(this)" /iframe

这是标题中的js（链接的FrameManager.js文件）

var FrameManager =
{
currentFrameId : '',
currentFrameHeight : 0,
lastFrameId : '',
lastFrameHeight : 0,
resizeTimerId : null,

init : function()
{
    if (FrameManager.resizeTimerId == null)
    {
        FrameManager.resizeTimerId = window.setInterval(FrameManager.resizeFrames, 500);
    }
},

resizeFrames : function()
{
    FrameManager.retrieveFrameIdAndHeight();

    if ((FrameManager.currentFrameId != FrameManager.lastFrameId) ||
        (FrameManager.currentFrameHeight != FrameManager.lastFrameHeight))
    {
        var iframe = document.getElementById(FrameManager.currentFrameId.toString());

        if (iframe == null) return;

        iframe.style.height = FrameManager.currentFrameHeight.toString() + "px";

        FrameManager.lastFrameId = FrameManager.currentFrameId;
        FrameManager.lastFrameHeight = FrameManager.currentFrameHeight;
        window.location.hash = '';
    }
},

retrieveFrameIdAndHeight : function()
{
    if (window.location.hash.length == 0) return;

    var hashValue = window.location.hash.substring(1);

    if ((hashValue == null) || (hashValue.length == 0)) return;

    var pairs = hashValue.split('&');

    if ((pairs != null) && (pairs.length > 0))
    {
        for(var i = 0; i < pairs.length; i++)
        {
            var pair = pairs[i].split('=');

            if ((pair != null) && (pair.length > 0))
            {
                if (pair[0] == 'frameId')
                {
                    if ((pair[1] != null) && (pair[1].length > 0))
                    {
                        FrameManager.currentFrameId = pair[1];
                    }
                }
                else if (pair[0] == 'height')
                {
                    var height = parseInt(pair[1]);

                    if (!isNaN(height))
                    {
                        FrameManager.currentFrameHeight = height;
                        FrameManager.currentFrameHeight += 15;
                    }
                }
            }
        }
    }
},

registerFrame : function(frame)
{
    var currentLocation = location.href;
    var hashIndex = currentLocation.indexOf('#');

    if (hashIndex > -1)
    {
        currentLocation = currentLocation.substring(0, hashIndex);
    }

    frame.contentWindow.location = frame.src + '?frameId=' + frame.id + '#' + currentLocation;
}
};

window.setTimeout(FrameManager.init, 300);

然后......我把它放在框架页面标题ResizeFrame.js中作为链接：

//orig frame mgr script
$.getScript("http://www.yoursitehereexamle.com/js/FrameManager.js", function(){

});


// external heights load

function publishHeight()
{
if (window.location.hash.length == 0) return;

var frameId = getFrameId();

if (frameId == '') return;

var actualHeight = getBodyHeight();
var currentHeight = getViewPortHeight();

if  (Math.abs(actualHeight - currentHeight) > 15)
{
    var hostUrl = window.location.hash.substring(1);

    hostUrl += "#";
    hostUrl += 'frameId=' + frameId;
    hostUrl += '&';
    hostUrl += 'height=' + actualHeight.toString();

    window.top.location = hostUrl;
}
}

function getFrameId()
{
var qs = parseQueryString(window.location.href);
var frameId = qs["frameId"];

var hashIndex = frameId.indexOf('#');

if (hashIndex > -1)
{
    frameId = frameId.substring(0, hashIndex);
}

return frameId;
}

function getBodyHeight()
{
var height;
var scrollHeight;
var offsetHeight;

if (document.height)
{
    height = document.height;
}
else if (document.body)
{
    if (document.body.scrollHeight)
    {
        height = scrollHeight = document.body.scrollHeight;
    }
    if (document.body.offsetHeight)
    {
        height = offsetHeight = document.body.offsetHeight;
    }

    if (scrollHeight && offsetHeight)
    {
        height = Math.max(scrollHeight, offsetHeight);
    }
}

return height;
}

function getViewPortHeight()
{
var height = 0;

if (window.innerHeight)
{
    height = window.innerHeight - 18;
}
else if ((document.documentElement) && (document.documentElement.clientHeight))
{
    height = document.documentElement.clientHeight;
}
else if ((document.body) && (document.body.clientHeight))
{
    height = document.body.clientHeight;
}

return height;
}

function parseQueryString(url)
{
url = new String(url);
var queryStringValues = new Object();
var querystring = url.substring((url.indexOf('?') + 1), url.length);
var querystringSplit = querystring.split('&');

for (i = 0; i < querystringSplit.length; i++)
{
    var pair = querystringSplit[i].split('=');
    var name = pair[0];
    var value = pair[1];

    queryStringValues[name] = value;
}

return queryStringValues;
}
// window load
window.onload = function(event)
    {
        window.setInterval(publishHeight, 300);
    }

但是没有运气让它运转起来 - 任何人都可以看到我哪里出错了。 iframe仍然出现但没有缩放。非常感谢！

Answer 1

以下是我使用外部网站调整iframe大小的代码。您需要在父级（使用iframe代码）页面和外部网站中插入代码，因此，这不能与您合作，无法编辑外部网站。

本地（iframe）页面：只需插入代码段
远程（外部）页面：你需要一个＆＃34; body onload＆＃34;和一个＆＃34; div＆＃34;包含所有内容。身体需要设置为＆＃34; margin：0＆＃34;

本地：

<IFRAME STYLE="width:100%;height:1px" SRC="http://www.remote-site.com/" FRAMEBORDER="no" BORDER="0" SCROLLING="no" ID="estframe"></IFRAME>

<SCRIPT>
var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
var eventer = window[eventMethod];
var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";
eventer(messageEvent,function(e) {
  if (e.data.substring(0,3)=='frm') document.getElementById('estframe').style.height = e.data.substring(3) + 'px';
},false);
</SCRIPT>

你需要这个＆＃34; frm＆＃34;前缀以避免其他嵌入代码（如Twitter或Facebook插件）出现问题。如果您有一个普通页面，则可以删除＆＃34; if＆＃34;和＃34; frm＆＃34;两个页面上的前缀（脚本和onload）。

远程：

你需要jQuery才能完成＆＃34;真正的＆＃34;页面高度。我无法实现如何使用纯JavaScript，因为使用body.scrollHeight或相关时，将高度调低（从较高到较低的高度）会出现问题。出于某种原因，它将始终返回最大高度（预先重新定义）。

<BODY onload="parent.postMessage('frm'+$('#master').height(),'*')" STYLE="margin:0">
<SCRIPT SRC="path-to-jquery/jquery.min.js"></SCRIPT>
<DIV ID="master">
your content
</DIV>

因此，父页面（iframe）的默认高度为1px。脚本插入＆＃34;等待消息/事件＆＃34;来自iframe。当收到一条消息（发布消息）并且前3个字符是＆＃34; frm＆＃34; （为了避免上述问题），将从第4个位置获取数字并设置iframe高度（样式），包括＆＃39; px＆＃39;单元。

外部网站（在iframe中加载）将＆＃34;发送消息＆＃34;使用＆＃34; frm＆＃34;到父母（开场白）和主div的高度（在这种情况下是id＆＃34; master＆＃34;）。＆＃34; *＆＃34;在postmessage中意味着＆＃34;任何来源＆＃34;。

希望这会有所帮助。抱歉我的英文。

调整iframe大小 - 可以访问外部网址代码

1 个答案: