如何在指定div中加载页面？使用target="_self"无效果求助

你现在的写法根本行不通，核心原因是：target 属性仅针对浏览器认可的浏览上下文（比如iframe、新窗口/标签页）生效，普通<div>不属于这个范畴——不管你把target设成content还是_self，都没法实现把页面加载到div里的效果。

下面给两种靠谱的解决办法：

方法1：用iframe替代div（最简单直接） #

把原来的<div name="content">改成<iframe>，这样a标签的target="content"就能直接生效，点击链接后页面会加载到iframe容器里：

<div class="div1">
    <ul class="menu">
        <li><a id="li1" href="main.html" target="content">HOME</a></li>
        <li><a id="li2" href="catog.html" target="content">ALL CATOGREIS</a></li>
        <li><a id="li3" href="about us.html" target="content">ABOUT US</a></li>
        <li><a id="li4" href="contact us.html" target="content">CONTACT US</a></li>
    </ul>
</div>
<iframe name="content" class="content" frameborder="0"></iframe>

可以给iframe加frameborder="0"去掉默认边框，再用CSS调整宽高、样式，让它看起来和原来的div完全一致。

方法2：用JavaScript异步加载到div（无iframe方案） #

如果不想用iframe，想真正把页面内容插入到div中，就得通过JS阻止a标签的默认跳转行为，用AJAX/fetch获取页面内容后再插入到目标div：

修改后的HTML（可去掉target属性） #

<div class="div1">
    <ul class="menu">
        <li><a id="li1" href="main.html">HOME</a></li>
        <li><a id="li2" href="catog.html">ALL CATOGREIS</a></li>
        <li><a id="li3" href="about us.html">ABOUT US</a></li>
        <li><a id="li4" href="contact us.html">CONTACT US</a></li>
    </ul>
</div>
<div id="content" class="content"></div>

对应的JavaScript代码 #

// 获取所有菜单链接
const menuLinks = document.querySelectorAll('.menu a');
// 获取目标div容器
const contentDiv = document.getElementById('content');

menuLinks.forEach(link => {
    link.addEventListener('click', function(e) {
        // 阻止a标签默认的页面跳转行为
        e.preventDefault();
        // 获取要加载的页面URL
        const targetUrl = this.href;
        
        // 用fetch请求页面内容
        fetch(targetUrl)
            .then(response => {
                if (!response.ok) {
                    throw new Error('页面加载失败');
                }
                return response.text();
            })
            .then(pageHtml => {
                // 将获取到的HTML内容插入到div中
                contentDiv.innerHTML = pageHtml;
            })
            .catch(error => {
                console.error(error);
                contentDiv.innerHTML = '<p>页面加载出错，请稍后重试</p>';
            });
    });
});

⚠️ 注意：这种方法受浏览器同源策略限制，如果你要加载的页面和当前页面不在同一域名、端口或协议下，浏览器会直接阻止请求。这种情况下建议优先用iframe方案，或者通过后端做代理转发。

内容的提问来源于stack exchange，提问作者mmll llmm