使用HTML中a标签的target属性在指定的框架中打开被链接文档


本文记录了如何使用HTML中a标签的target属性在指定的框架中打开被链接文档。


使用<frame>标签,做一个有框架的网页,框架思路如下图所示:

该网页由Frame A和Frame B两部分组成,其中给Frame A设置属性值name="A"。

下面先开始写这个网页:

<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <title>This is a title</title>
</head>

<frameset cols="50%,50%">

    <frame src="###/Frame_A.html" name="A"/>
    <frame src="###/Frame_B.html" />

</frameset>

</html>

这只是一个演示,这里用“###”代表具体的路径。

这样网页的效果就是左边50%的部分显示Frame_A.html的网页内容,右边50%的部分显示Frame_B.html的网页内容。

继续做Frame_A.html和Frame_B.html:

Frame_A.html:

<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
</head>

<body bgcolor="#8F8FBD">

    <hr />
    <h3>Frame A</h3>
    <hr />

    <p>
        嗯?听说我旁边的 Frame B 想要用新的链接把我覆盖掉?
    </p>

</body>

</html>

Frame_B.html:

<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
</head>

<body bgcolor="#EBC7900">

    <hr />
    <h3>Frame B</h3>
    <hr />

    <p>
        嗯!!让我用新的链接把 Frame A 覆盖掉吧!
    </p>

    <p>
        &lt;a href=&quot;###/New_Page.html/&quot; target=&quot;<b>A</b>&quot;&gt;This is a
        link...&lt;/a&gt;
    </p>
    <a href="###/New_Page.html" target="A">This is a link...</a>

</body>

</html>

同样的,这里只是为了演示,用“###”代表具体的路径。

最后做一下New_Page.html:

<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
</head>

<body>
    <h1>This is a new page!</h1>
</body>

</html>

测试一下!该网页的效果:

点击Frame_B中的链接后,效果如下:

可以看到,虽然超链接的位置位于Frame B中,但最后是在Frame A中打开了超链接。

这样便实现了在指定的框架中打开被链接文档。



 

已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 游动-白 设计师:上身试试 返回首页