Javascript 使div的行为类似于iframe

我想使用以下函数将我的页面内容加载到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">

由于缺少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>

无法通过任何设置或切换使其行为类似于

，如果您想象类似的情况。毕竟，如果你想要

，你应该使用

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

所以如果你加载了这个页面

www.example.com/somedirectory/index.php

它使用

<link href="style.css" >

你必须使用

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

等等

因此，您可以遍历DOM树，查找

link

、

a

、

img

以及使用某个属性中的地址的所有其他元素，检查这些属性，检查它们是否使用绝对地址（可以用regexp完成，但我现在不给你，因为有很多可能性：

http://something...

、

www.something.com/…

甚至

localhost/…

），如果没有，则绝对引用它们（通过在下载文档所在的网页和目录的整个路径前加前缀）

您可以使用递归函数遍历DOM树，首先访问

document.body

，并为每个访问的节点调用其所有元素子级的函数。尽管在您的情况下，您可以利用

document.getElementsByTagName

精确地获得所需特定元素的列表

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

---

TLDR：您不需要jQuery，但是使用PS中的

这两个原因都是毫无意义的。一旦您将responseText放入div中，它就是同一个页面。显示您正在单击的链接以及用于设置单击的函数event@J.Bruni当我点击div itelf中的链接时，@bažmegakapa它们不是必需的sarily解释了他的理由；有时组织可以有相当武断和迟钝的规则，比如不允许在URL中使用查询字符串（就像我以前的一家公司那样）。