iframe 超链接跳转控制：在 iframe 内部跳转和外部跳转

本文将介绍如何通过 iframe 的超链接实现网页跳转，以及如何控制跳转的目标位置，是在 iframe 内部跳转还是在外部页面跳转。

1. 在 iframe 内部跳转

如果想要通过 iframe 内部的超链接在 iframe 中打开新的页面，可以在超链接标签中使用 target 属性，并将属性值设置为 iframe 的 name 属性值。

例如，在 index.html 中包含一个名为 myframe 的 iframe，该 iframe 加载 page1.html 文件，并在 page1.html 中添加一个超链接，该超链接指向 page2.html 文件，并设置 target 属性值为 myframe。

<!DOCTYPE html>
<html>
<head>
	<title>IFrame Example</title>
</head>
<body>
	<h1>Welcome to my website</h1>
	<iframe src='page1.html' width='100%' height='500'>
		<p>Your browser does not support iframes.</p>
	</iframe>
	<p>Thank you for visiting!</p>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
	<title>Page 1</title>
</head>
<body>
	<h2>This is Page 1</h2>
	<p>Click on the link below to go to Page 2:</p>
	<a href='page2.html' target='myframe'>Go to Page 2</a>
</body>
</html>

当用户点击 Go to Page 2 链接时，page2.html 会在 myframe iframe 中打开。

2. 在 iframe 外部跳转

如果想要通过 iframe 内部的超链接在 iframe 外部的页面进行跳转，可以使用 target='_parent' 属性。

例如，在 page1.html 中添加一个超链接，该超链接指向 http://www.example.com 网站，并设置 target 属性值为 _parent。

<!DOCTYPE html>
<html>
<head>
	<title>Page 1</title>
</head>
<body>
	<h2>This is Page 1</h2>
	<p>Click on the link below to go to Page 2:</p>
	<a href='http://www.example.com' target='_parent'>Go to Page 2</a>
</body>
</html>

当用户点击 Go to Page 2 链接时，http://www.example.com 会在 iframe 的父页面中打开。

3. 保持 iframe 不变，只在父页面进行跳转

如果想要保持 iframe 本身不变，只在父页面中进行跳转，可以使用 JavaScript 来实现。

例如，在 index.html 中添加一个 JavaScript 函数 jumpToPage，该函数用来在父页面中加载指定的 URL。在 page1.html 中添加一个超链接，该超链接调用 jumpToPage 函数，并传递目标 URL。

<!DOCTYPE html>
<html>
<head>
	<title>IFrame Example</title>
</head>
<body>
	<h1>Welcome to my website</h1>
	<iframe id='myframe' src='page1.html' width='100%' height='500'>
		<p>Your browser does not support iframes.</p>
	</iframe>
	<p>Thank you for visiting!</p>
	<script>
		function jumpToPage(url) {
			document.getElementById('myframe').src = url;
		}
	</script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
	<title>Page 1</title>
</head>
<body>
	<h2>This is Page 1</h2>
	<p>Click on the link below to go to Page 2:</p>
	<a href='#' onclick='jumpToPage('page2.html')'>Go to Page 2</a>
</body>
</html>

当用户点击 Go to Page 2 链接时，page2.html 会在父页面中加载，而 myframe iframe 则保持不变。

总结

本文介绍了三种 iframe 超链接跳转控制的方法，分别是在 iframe 内部跳转、外部跳转以及保持 iframe 不变只在父页面跳转。希望这些方法能帮助你更好地控制 iframe 的跳转行为。