将网页插入 Div 而不是 iframe？答案

【问题标题】：Insert Webpages into Div instead of iframe?将网页插入 Div 而不是 iframe？
【发布时间】：2013-07-23 16:34:31
【问题描述】：

这是我的 loop.html 文件的完整代码。它首先从位于同一目录中的单独 XML 文件中提取 url 列表，然后在指定时间循环遍历它们。时间元素是它将等待直到循环到下一页的量。我想要做的是使用 DIV 循环浏览 URL，因为所有浏览器都不支持 iframe，并且在我运行 html 脚本时不显示某些内容。我不确定如何处理“dashboard.url”——当我想使用 div 时？

我从另一个站点找到了这段代码——当你用它替换 frams['theDisplay'] 行时，它会将 div 设置为网页——但我想要这样的东西，使用仪表板.url

$("#siteloader").html('<object data="http://latimes.com" />');

如果这是一个很长的问题，如果您感到沮丧，我很抱歉。我只是想边走边学。谢谢！

list.xml 格式示例：

<list>
<url>
<link>http:latimes.com</link>
<time>2</time>
</url>
<url>
<link>http:stackoverflow.com</link>
<time>4</time>
</url>
</list>

整个 HTML 代码：

<!DOCTYPE HTML>
<!--Created by Megan Chiu  - 30 June 2013-->
<html>

<!-- CSS -->
<style type="text/css">
displayArea {
    margin: 0;
    width: 100%;
}

html, body {
    height: 100%
    width: 100%;
}

div {
    height: 100%;
    width: 100%
}

object {
    width: 100%;
    min-height: 100%;
}       
</style>  

<head>
    <meta charset="UTF-8">
    <style type="text/css">
    body, html { margin: 0; padding: 0; width: 100%; height: 100%;
                 overflow: hidden; }
    iframe { border: none; }

</style>

<script src="http://code.jquery.com/jquery-1.10.1.min.js"
    type="text/javascript"></script>
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>

<script type="text/javascript">

    var Dash = {
        nextIndex: 0,
        dashboards: [],

        loadXML: function() {
            $.ajax( {
                type: "GET",
                url: "list.xml", 
                dataType: "xml",
                success: Dash.renderXML
            });
        },

        renderXML: function(xml) {

            $(xml).find("url").each(function() {
                var _link = $(this).find('link').text();
                var _time  = $(this).find('time').text();
                Dash.dashboards.push({url:_link, time:_time});
            }); 

            Dash.display();

            },

        display: function()
        {
            var dashboard = Dash.dashboards[Dash.nextIndex];    
            frames['theDisplay'].location.href = dashboard.url;
            Dash.nextIndex = (Dash.nextIndex + 1) % Dash.dashboards.length;
            setTimeout(Dash.display, dashboard.time * 1000);
        }    
    };
    window.onload = Dash.loadXML;
</script>
</head>
<body>
</body>
<iframe id="theDisplay" width="100%" height="100%"></iframe>
</html>

【问题讨论】：

没有不支持 iframe 的浏览器值得担心。
这有点主观，但是没有浏览器支持通过<object> 加载 HTML 文档，而没有更好的支持通过<iframe> 加载。
您可以尝试$("#theDisplay").load(dashboard.url)，但由于 AJAX 同源策略，它可能不起作用。要解决此问题，您需要运行代理服务器。
@Quentin 我不必使用
@Barmar 谢谢！我已经尝试过了，但没有成功——你知道解决这个问题的任何其他方法吗？

标签： javascript jquery html iframe

【解决方案1】：

  <div id="content1"></div>
<script>
document.getElementById("content1").innerHTML='<object type="text/html" data="header.php" ></object>';
alert('Load_Ok');
</script>

【讨论】：

【解决方案2】：

您不能仅使用纯 JavaScript 从其他网站加载内容。时期。

http://en.wikipedia.org/wiki/Same_origin_policy

那么你能做什么？您可以从您的服务器发出网络请求，并从远程服务器获取 Http 响应并将它们放入 div 元素中。

<div><%=(new WebClient()).DownloadString("http://www.stackoverflow.com")%></div>

但最大的问题之一是，由于您将从远程网站下载所有样式和脚本，因此您的页面可能看起来不太好。甚至不是人类可读的。如果您继续从同一个 IP 访问这些服务器，您可能会被它们阻止。

祝你好运。

【讨论】：

如果我替换：frames['theDisplay'].location.href = dashboard.url;与： $("#theDisplay").html('
我 -1'd 这个答案，因为这并不完全正确。您可以在源代码中执行此操作：
@Magmatic 您打算如何将自己的脚本放在远程网站上？如果您认为您的评论是一个答案，请将其作为答案而不是评论。
也许您的站点是yourwebsite.com，并且您想与httpS://yourwebsite.com 建立安全的AJAX 连接，以使用纯Javascript 显示用户密码或其他内容。从技术上讲，这是一个不同的网站，因为它具有不同的协议，因此同源策略会禁止它，但您仍然可以按照我描述的方式进行操作。我只是不希望人们认为“您不能仅使用纯 JavaScript 加载来自另一个网站的内容。句号。”，因为有办法绕过它。
“另一个网站”是指“另一个网站”不是你的。看问题，OP在问网站不是他自己的。