带有 DIV 和 Jquery 的 iFrame 无法正常工作答案

【问题标题】：iFrame with DIV and Jquery is not working带有 DIV 和 Jquery 的 iFrame 无法正常工作
【发布时间】：2022-01-25 18:54:12
【问题描述】：

我正在尝试将其他网站的内容用于我的网站。我尝试使用 DIV 和 Jquery 而不是 iframe 标签 <iframe>

我的代码：

<head>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js?ver=1.4'></script>

<script type='text/javascript'>
$(document).ready(function (){
$('#divframe').load('http://www.example.com');     
});
</script>
</head>
<body>
<div id="divframe"></div>
</body>

它没有返回任何值，也没有在我的网站上显示 example.com 的内容。表示页面为空且空白。

已编辑：我正在寻找没有iframe、object、embed 标签的 iframe 解决方案。

请帮我把它修好:)

【问题讨论】：

你不能这样做，因为它违反了同源政策。
此外，该网站将拥有自己的 <head> 和 <body> 元素——您不能将它们嵌套在自己网页的正文中。
@Barmar 即使我删除了<head> 和<body> 标签，页面仍然显示为空白。
阅读我的第一条评论。
您在 JavaScript 控制台中没有收到 CORS 错误吗？

标签： javascript html jquery ajax iframe

【解决方案1】：

您需要使用 iframe 标记和attr() 来执行此操作。

注意：您还需要确保网站的 url 不受保护，无法通过 iframe 的第 3 方站点框架（如 youtube.com、google.com 等）加载。

https://en.wikipedia.org/wiki/Framekiller

$(document).ready(function (){
  $('#divframe').attr("src", "https://wikipedia.org/wiki/Main_Page");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<iframe id="divframe" style="width:100%;height:95vh"></iframe>

【讨论】：