获取iframe 的顶级父元素 window.top

    网站导航

    1. <!DOCTYPE html>
    2. <html lang="en">
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.     <title>Document</title>
    9. </head>
    11. <body>
    12.     <div class="wrap">
    13.         <aside class="aside-wrap">
    14.             <ul class="nav-list">
    15.                 <li class="nav-item">
    16.                     <a href="https://developer.mozilla.org/zh-CN/docs/Web" target="navIframe" class="nav-lk">cdn</a>
    17.                 </li>
    18.                 <li class="nav-item">
    19.                     <a href="https://www.dedao.cn" target="navIframe" class="nav-lk">得到</a>
    20.                 </li>
    21.                 <li class="nav-item">
    22.                     <a href="https://www.suning.com" target="navIframe" class="nav-lk">苏宁商场</a>
    23.                 </li>
    24.                 <li class="nav-item">
    25.                     <a href="https://www.bilibili.com" target="navIframe" class="nav-lk">bb商场</a>
    26.                 </li>
    27.             </ul>
    28.         </aside>
    29.         <section class="frame-wrap">
    30.             <iframe src="https://www.bilibili.com" name="navIframe" width="1000" height="1000"></iframe>
    31.         </section>
    32.     </div>
    33. </body>
    35. </html>

    代码编辑器

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="wrap">
        <div class="code-panel">
            <form action="server/script.php" method="post" target="codesFrame">
                <div class="hd">
                    <input type="submit" value="提交代码" class="submit-btn" />
                </div>
                <div class="eidt-panel">
                    <textarea name="codes" class="edit-textarea"></textarea>
                </div>
            </form>
        </div>
        <div class="iframe-wrap">
            <iframe src="server/script.php" name="codesFrame"></iframe>
        </div>
    </div>
</body>

</html>

    <?php
if (isset($_POST['codes'])) {
    $codes = $_POST['codes'];
} else {
    $codes = 'document.write("欢迎使用在线代码编辑器")';
}
?>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script type="text/javascript">
        <?php echo $_POST['codes'] ?>
    </script>
</body>

    注: from 中的target=”codesFrame” 属性 与 iframe 中的name 一一对应 则点击a标签则跳转到对应的iframe