ufologist/page-b.html

## page-b.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页面 B</title>
</head>
<body>
    <h1>页面 B</h1>
    <ul>
        <li><a href="http://baidu.com">X度</a></li>
        <li><a href="http://baidu.com" target="_top">X度 target="_top" 可以重定向父级页面</a></li>
    </ul>
</body>
</html>

## prevent-iframe-top-navigation-page-a.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页面 A</title>
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
</head>
<body>
    <h1>页面 A</h1>
    <h2>不设置 iframe 的 sandbox</h2>
    <p>iframe 页面中的链接可以让父级页面重定向</p>
    <iframe src="page-b.html" width="100%" height="200"></iframe>

    <h2>设置 iframe 的 sandbox="allow-forms allow-scripts allow-popups"</h2>
    <p><strong>在 PC 端浏览器上测试</strong>可以防止 iframe 页面中的链接重定向父级页面, 会转变成 _blank 的形式弹出来</p>
    <iframe src="page-b.html" sandbox="allow-forms allow-scripts allow-popups" width="100%" height="200"></iframe>

    <h2>设置 iframe 的 sandbox="allow-forms allow-scripts"</h2>
    <p><strong>在移动端还是不能防止父级页面被重定向</strong>, 只好通过禁止 allow-popups 来让链接点击无效</p>
    <iframe src="page-b.html" sandbox="allow-forms allow-scripts" width="100%" height="200"></iframe>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>页面 B</title>
	</head>
	<body>
	<h1>页面 B</h1>
	<ul>
	<li><a href="http://baidu.com">X度</a></li>
	<li><a href="http://baidu.com" target="_top">X度 target="_top" 可以重定向父级页面</a></li>
	</ul>
	</body>
	</html>