在 div 中加载外部网页并调整高度答案

【问题标题】：Load external webpage in div and adjust height在 div 中加载外部网页并调整高度
【发布时间】：2012-10-06 00:45:53
【问题描述】：

我正在尝试使用 Jquery 将外部网页加载到 div (#siteloader) 中，但我无法弄清楚如何调整 div 的高度以便重新调整大小以适应外部网站的内容，而无需获取滚动条。我绝对不想使用 iframe。

代码如下：

<!doctype html>
<html>
    <meta charset="utf-8">
    <title>Load remote content into object element</title>

    <style type="text/css">
    object {
        width: 100%;
    }       
    </style>

    </head>

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

        <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
        <script>
        $("#siteloader")
            .html('<object data="https://system.netsuite.com/pages/customerlogin.jsp?country=US">');
        </script>

    </body>

</html>

对此的任何帮助将不胜感激！

【问题讨论】：

我用 iframe 做了同样的事情。因为我可以控制外部 HTML，所以我添加到页面函数 set_iframe_height(w) P $('#iframe-element').height(w);并在嵌入页面中我添加了 parent.set_iframe_height($('body').height());

标签： jquery html web

【解决方案1】：

不是你的div 没有扩展，而是你的object。尝试解决这个问题 - DEMO

html, body {
    height: 100%;
}

div {
    height: 99%;
}

object {
    width: 100%;
    min-height: 100%;
}

【讨论】：

【解决方案2】：

在 jQuery 中，有一个名为 .load() 的函数，遗憾的是它不能用于检索任何跨域 HTML。

您可以调用 AJAX GET 来检索 HTML 并将其放入您的 div 中。

或者你可以试试这个模组：http://james.padolsey.com/javascript/cross-domain-requests-with-jquery/

【讨论】：

【解决方案3】：

如果您不指定高度或宽度，它会自动扩展为适当的大小，不过我建议您设置 max-height 或 max-width 和 overflow: hidden，这只是为了让场景控制内容太大，溢出隐藏会阻止滚动条

【讨论】：