Question

我想在页面的“right_side”div中显示home.html页面的内容。我怎样才能做到这一点？

link.html -----------------------

<html>
<head>
<title>Link Example</title>
</head>
<body>
<div id="left_side">
<a href="home.html" >Home</a>
<a href="products.html" >Home</a>
</div>
<div id="right_side">
</div>                                    
</body>
</html>

Answer 1

您可以简单地使用iframe而不是div。只需加上

<iframe name="right_side" src="" width="100%"  
        height="100%" frameBorder="0"></iframe>

代替你的右侧div。

并将<a href="somelink">替换为<a href="somelink" target="right_side">

Answer 2

假设您需要动态解决方案：您可以使用类似jQuery的东西来检索home.html文件的HTML / DOM，然后将home.html中相关的DOM子树插入#right_side div。

否则（非动态）：只需复制＆amp;粘贴内容。但我认为这太微不足道了。

Answer 3

使用Ajax代替。写下这样的东西

 <a href="javascript: loadXMLDoc();" >Home</a

并在head中实现。我添加了一个javascript google jquery位置。你必须在你的CSS中拥有那个“right_side”div。文件home.html的位置必须准确无误。检查它是否有效。

loadXMLDoc（）把

<html>
<head><script type="text/javascript" src="[http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js]"></script>
<title>Link Example</title>
<script type="text/javascript">
    function loadXMLDoc() {
        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("right_side").innerHTML=xmlhttp.responseText;
        }
    }
    xmlhttp.open("POST","home.html",true);
    xmlhttp.send();
}
</script></head>
<body>
    <div id="left_side">
        <a href="javascript:loadXMLDoc()" >Home</a>
        <a href="products.html" >Home</a>
    </div>
    <div id="right_side">
    </div>                                    
</body>
</html>

如何在目标div中打开一个链接

3 个答案:

loadXMLDoc（）把