让 div 表现得像 iframe

Posted 2023-03-05

【中文标题】让 div 表现得像 iframe

【英文标题】：making div behave like iframe

【发布时间】：2012-05-18 10:21:42

【问题描述】：

我想使用这个函数在 div 元素中加载我的页面内容：

function loadmypage(DIV, pageURL)

var xmlhttp;
if (window.XMLHttpRequest)
  // code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  
else
  // code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  
xmlhttp.onreadystatechange=function()
  
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    
    document.getElementById(DIV).innerhtml=xmlhttp.responseText;
    
  
xmlhttp.open("GET", pageURL ,true);
xmlhttp.send();

但是，当我单击“框架”本身内的链接时，该功能不起作用。我猜目标元素与加载页面位于不同页面的原因 自己。

所以我的问题是：有没有办法让 div 元素在框架本身内加载整个页面时表现得像 iframe？

PS：出于安全原因，我不允许使用 iFrame，出于效率原因也不允许使用 jQuery。 主页中的链接正常加载目标，当我单击这些页面中的任何链接时出现问题。

 <div id="nav" class="mmenu">
                                <ul type="none">

                                            <li><a  href= "javascript:loadmypage('viewMessages.php')">Messages</a></li>
                                            <li><a  href= "javascript:loadmypage('userHomepage.php')">My Conferences</a></li>
                                            <li><a  href= "javascript:loadmypage('availableConferences.php')">Conferences</a></li>
                                            <li><a  href= "javascript:loadmypage('incomingRequests.php')">Requests</a></li>
                                            <li><a  href= #>News</a></li>
                                            <li><a  href= #>Options</a></li>


                                        </ul>
                                    </div>
                            </fieldset>

                                        <div id="collabsoft" class="collabsoft">

【问题讨论】：

PS里的这两个理由简直是一派胡言。

一旦你把 responseText 放在你的 div 里面，它就是同一个页面。

显示你点击的链接以及你用来设置点击事件的函数

@J.Bruni 当我点击 div 本身的链接时。

@bažmegakapa 他们不一定是他的理由；有时组织可能有相当武断和滞后的规则，例如不允许在 URL 中使用查询字符串（就像我以前的公司一样）。

【参考方案1】：

您的链接不起作用，因为您缺少 div 参数。注意你的功能：

function loadmypage(DIV, pageURL)

...

第一个参数是 DIV，您只传递了 pageURL。

<li><a  href= "javascript:loadmypage('viewMessages.php')">Messages</a></li>
                                            <li><a  href= "javascript:loadmypage('userHomepage.php')">My Conferences</a></li>
                                            <li><a  href= "javascript:loadmypage('availableConferences.php')">Conferences</a></li>
                                            <li><a  href= "javascript:loadmypage('incomingRequests.php')">Requests</a></li>

【参考方案2】：

<div> 不能通过任何设置或切换来表现得像<iframe>，如果你想象这样的话。毕竟，如果你想要<iframe>，你应该使用<iframe>。

无论如何，不​​起作用的链接可能使用相对寻址。这是对页面内部链接的合理期望。要让他们在您的页面上工作，您必须使用绝对地址。

所以如果你加载了页面

www.example.com/somedirectory/index.php

它使用了

<link href="style.css" >

你必须使用

<link href="www.example.com/somedirectory/style.css" >

等等

所以你可以遍历 DOM 树，查找 link、a、img 和所有其他在某个属性中使用地址的元素，检查这些属性，检查它们是否使用绝对地址（可以完成有一个正则表达式，但我现在不想给你一个，因为有很多可能性：http://something...、www.something.com/... 甚至localhost/...），如果没有，绝对引用它们（通过在网页的整个路径前面加上下载文件所在的目录）。

您可以使用递归函数遍历 DOM 树，首先访问document.body，然后为每个访问的节点调用其所有子元素的函数。尽管在您的情况下，您可以利用document.getElementsByTagName 来准确获取您需要的特定元素的列表。

最后，请注意，出于安全原因，脚本必须来自同一主机（IP 甚至端口）。因此，来自其他网站的脚本将无法为您远程引用。您还必须将它们下载到您的服务器上。

TLDR：您不需要 jQuery，但使用 <iframe>。