新手上路，请多包涵

如何调整来自另一个域的 iframe 的大小？

过去几天我一直在尝试将 iframe 集成到网站中。这是一个短期解决方案，而另一方开发和 API（可能需要几个月……）并且因为这是我们确实想要使用 easyXDM 的短期解决方案 - 我可以访问另一个域但是要求他们这样做已经足够困难了按原样添加 p3p 标头…..

3个内嵌框架

我找到的最接近的解决方案是 3 个 iframe - 但它会影响 chrome 和 safari，所以我不能使用它。

在铬中打开

http://css-tricks.com/examples/iFrameResize/crossdomain.php#frameId=frame-one&height=1179

测量滚动条

我找到了另一篇关于如何使用 scrollheight 来尝试调整表单大小的帖子。理论上它运行良好，但我无法使用 iframe 滚动高度正确应用它。

 document.body.scrollHeight

这显然使用了主体高度（无法访问这些属性 100% 是基于客户端显示 canvaz 而不是 x-domains 文档高度）

我尝试使用 jQuery 获取 iframe 高度

$('#frameId').Height()

$('#frameId').clientHeight

$('#frameId').scrollHeight

在 chrome 和 ie 中返回不同的值 - 或者根本没有意义。问题是框架内的所有内容都被拒绝 - 甚至滚动条……

计算样式

但是，如果我检查 iframe 的 chrome 中的元素，它会严重显示 iframe 内的文档尺寸（使用 jQuery x 域获取 iframe.heigh - 访问被拒绝）计算的 CSS 中没有任何内容

现在 chrome 是如何计算的？（编辑-浏览器使用其内置的渲染引擎重新渲染页面以计算所有这些设置——但没有附加到任何地方以防止跨域欺诈……所以……）

HTML4

我阅读了 HTML4.x 的规范，它说应该有通过 document.element 公开的只读值，但通过 jQuery 拒绝访问

代理框架

我沿着代理站点的路线返回并计算哪个是好的..直到用户通过 iframe 登录并且代理获得登录页面而不是实际内容。此外，有些人两次调用该页面是不可接受的

http://www.codeproject.com/KB/aspnet/asproxy.aspx

http://www.johnchapman.name/aspnet-proxy-page-cross-domain-requests-from-ajax-and-javascript/

重新渲染页面

我没有走这么远，但那里有 jscript 引擎可以查看源代码并根据源文件重新呈现页面。但它需要破解那些 jscripts.. 这对于商业实体来说不是理想的情况……有些调用纯 Java applets 或服务器端渲染

http://en.wikipedia.org/wiki/Server-side_JavaScript

http://htmlunit.sourceforge.net/ <-java 不是 jscript

http://maxq.tigris.org/

所有这些都可以通过 HTML5 套接字来完成。但 easyXDM 是非 HTML5 投诉页面的绝佳后备。

解决方案 1 非常好的解决方案！

使用 easyXDM

在您的服务器上，您以以下形式设置页面

<html>
<head>
<script src="scripts/easyXDM.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript">

    var transport = new easyXDM.Socket(/** The configuration */{
    remote: "http://www.OTHERDOMAIN.example/resize_intermediate.html?url=testpages/resized_iframe_1.html",

    //ID of the element to attach the inline frame to
    container: "embedded",
    onMessage: function (message, origin) {
        var settings = message.split(",");
        //Use jquery on a masterpage.
        //$('iframe').height(settings[0]);
        //$('iframe').width(settings[1]);

        //The normal solution without jquery if not using any complex pages (default)
        this.container.getElementsByTagName("iframe")[0].style.height = settings[0];
        this.container.getElementsByTagName("iframe")[0].style.width = settings[1];
    }
});

</script>

</head>

<body>
    <div id="embedded"></div>
</body>

在调用者域中，他们只需要在同一个地方添加 intermediate_frame HTML 和 easyXDM.js 。就像父文件夹一样 - 然后您可以访问相关目录或只为您包含的文件夹。

原文由 Piotr Kula 发布，翻译遵循 CC BY-SA 4.0 许可协议

javascript html css iframe cross-domain

阅读 661

2 个回答

得票最新

社区维基

发布于
2022-12-19

✓ 已被采纳

问题是 - 除了使用跨域消息传递之外没有其他方法，因为您需要从一个域中的文档获取计算的高度，到不同域中的文档。

因此，要么使用 postMessage （适用于所有现代浏览器），要么花 5 分钟调整来自 easyXDM 的 resize iframe 示例。

对方真的只需要将几个文件复制到他们的域中，并在他们的文档中添加一行代码..

原文由 Sean Kinsey 发布，翻译遵循 CC BY-SA 3.0 许可协议

社区维基

发布于
2022-12-19

与 Sean 提到的类似，您可以使用 postMessage。我花了很多时间尝试不同的方法来跨域调整 iframe 的大小，但没有运气，直到我偶然发现了 David Walsh 的这篇很棒的博客文章：http: //davidwalsh.name/window-iframe

这是我的代码和 David 的解决方案的组合。我的解决方案专门针对调整 iframe 的大小。

在子页面中，找到页面的高度并将其传递给父页面（包含 iframe）。将 element_id 替换为您的元素 ID（html、正文等）。

 <script>
function adjust_iframe_height(){
    var actual_height = document.getElementById('element_id).scrollHeight;
    parent.postMessage(actual_height,"*");
    //* allows this to post to any parent iframe regardless of domain
}
</script>

<body onload="adjust_iframe_height();">
//call the function above after the content of the child loads

在父窗口上，添加此代码。将 iframe_id 替换为您的 iframe ID：

 <script>
// Create IE + others compatible event handler
var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
var eventer = window[eventMethod];
var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";

// Listen to message from child window
eventer(messageEvent,function(e) {
  console.log('parent received message!:  ',e.data);
  document.getElementById('iframe_id').height = e.data + 'px';
},false);
</script>

如果你打开控制台，你会看到打印在控制台日志中的高度。这将帮助您进行调试，这就是我将其留在那里的原因。

最好的，贝克

原文由 Baker Humadi 发布，翻译遵循 CC BY-SA 3.0 许可协议

撰写回答

你尚未登录，登录后可以

和开发者交流问题的细节
关注并接收问题和回答的更新提醒
参与内容的编辑和改进，让解决方法与时俱进

推荐问题

跨域 iframe 调整大小

你尚未登录，登录后可以

js 如何将Key属性相同的放在同一个数组？

Next.js做纯前端是否可行？

如何实现一个深拷贝函数？

CSS如何让指定的某个Tag不显示（比如：display=none），但是还是占有位置呢？

怎么获取动态弹出对话框的模拟单击？

git提交记录问题？

如何实现类似豆包的AI改写框跟随内容滚动效果？

Stack Overflow 翻译