Question

如何调整外部网站的大小以适应我网站中的iframe？请任何人帮帮我？

Answer 1

）

如果外部iframe位于其他域中，则无法与其进行交互。如果它位于同一个域中，您可以按如下方式调整其内容的大小：

/**
* this function allows you to retrieve the window object of an iframe given by its ID
* 
* @param {string} id - iframe id
*/
var getIframe = function (id) {
    if ($.browser.mozilla) return document.getElementById(id).contentWindow;
    return window.frames[id];
};

然后，从外部文件（包含iframe的文件），你可以在加载iframe时调用类似的东西：

var resizeIframeContent = function(iframeID, sizeX, sizeY){

  var iframe = getIframe(iframeID);
  iframe.updateSize(sizeX, sizeY);

}

使用此代码，您将在iframe的内部文档中调用函数updateSize，因此您应该在附加到窗口对象（全局命名空间）的嵌套文档中添加此函数。像这样：

var updateSize= function(sizeX, sizeY){
   //do you resizing stuff here, which depends on your html structure, it could be something like this:
    $("#content").width(sizeX).height(sizeY);
}

但是，我认为您提出的问题是错误的，而您实际上是在尝试询问如何修改iframe（而不是iframe内容）的大小以适应其内部内容。如果是这样，你不能在跨域的情况下这样做，但如果两个页面都在同一个域中，你可以用类似的方式来做，如下所示：

在内部文档上，当文档准备就绪时，将其大小发送到父容器：

$(function(){
  var content = $("#content"); //change this to point your container, or obtain the document height or anything else
  parent.onIframeDimensionsRetrieved( content.width(), content.width() );
});

并在您的outter文档（带有iframe的文档）中检索新尺寸并更新iframe尺寸：

var onIframeDimensionsRetrieved = function(width ,height){
   $("#youriframe").width(width).height(height);
}

这就是全部:-)所有我的示例代码都使用jQuery使其可读，如果你愿意，也可以使用纯JS。

祝你好运！我希望它有所帮助： - ）

如何调整外部网站的大小以适应iframe？

1 个答案: