2012-01-15 35 views
2

我看到很多关于调整内嵌框架大小的问题,但所有这些都无法访问外部网址。在这种情况下,我确实。我可以在头标记中插入一个脚本。我试图用这个脚本插入到包含的iframe(我知道的开启和关闭帧标签是错误的主网页标题 - 它不会让我离开他们:调整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仍然显示,但不会缩放。非常感谢!

回答

0

这是我的代码来调整外部网站的iframe的大小。您需要在父级(包含iframe代码)页面和外部网站中插入代码,因此,这不适用于您无法编辑外部网站的权限。

  • 本地(IFRAME)页:只需插入一段代码
  • 远程(外部)页:你需要一个“身体的onload”,并保存所有内容的“分区”。和身体需要被称呼为“保证金:0”

地方:

<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> 

你需要这个“FRM”前缀,以避免与Twitter或Facebook等插件其他嵌入式代码的问题。如果您有普通页面,则可以在两个页面上删除“if”和“frm”前缀(脚本和onload)。

远程:

你需要jQuery来完成关于 “真实” 的页面高度。我不知道如何处理纯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。该脚本从iframe插入“等待消息/事件”。当收到消息(邮件消息)并且前3个字符为“frm”(以避免上述问题)时,将从第4个位置获取数字并设置iframe高度(style),包括'px'单位。

外部网站(加载到iframe中)将“发送一条消息”给父节点(opener),并带有“frm”和主div的高度(在本例中为id“master”)。 postmessage中的“*”表示“任何来源”。

希望这会有所帮助。对不起我的英语不好。