Question

我想使用此函数在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。主页面中的链接正常加载目标，当我点击这些页面内的任何链接时会出现问题。

 <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">

Answer 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>

Answer 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甚至端口）中。因此，来自其他Web的脚本将无法为您远程引用。您还必须在服务器上下载它们。

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

让div表现得像iframe

2 个答案: