内联框架的学习iframe

一方1

于 2022-09-29 20:58:25 发布

阅读量173

点赞数

文章标签：学习 servlet java

本文链接：https://blog.csdn.net/m0_67737085/article/details/127113534

版权

1.iframe（iframe+tab）

内联框架是在页面内生成一个内联的框架，如代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内联框架</title>
</head>
<body>
<!--
iframe内联框架
src：地址
width：宽度
height：高度
-->
<iframe src="https://www.bilibili.com/" frameborder="0"></iframe>
</body>
</html>

如上便是运行结果，我在src里面输入了B站的代码，便页面的左上角生成了一个很小的窗口显示了B站。我们还可以在里面加入width宽度和height高度来改变窗口的大小。如代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内联框架</title>
</head>
<body>
<!--
iframe内联框架
src：地址
width：宽度
height：高度
-->
<iframe src="https://www.bilibili.com/" frameborder="0" width="1000px" height="800px"></iframe>
</body>
</html>

我们可以看到修改后的窗口变成了我们修改的大小。

进行扩展

我们加入链接标签，加入跳转功能。代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内联框架</title>
</head>
<body>
<!--
iframe内联框架
src：地址
width：宽度
height：高度
-->
<iframe src="" name="内联窗口" frameborder="0" width="1000px" height="800px"></iframe>
<a href="https://www.bilibili.com/" target="内联窗口" >点击跳转</a>
</body>
</html>

我们在iframe中加入了name进行了命名，那么在herf跳转中利用target指定跳转，便达到了通过点击跳转跳转到内联框架的操作，并在内联窗口中打开了B站。