【实战】iframe实用之网页导航、代码编辑器

最新推荐文章于 2023-12-01 11:23:23 发布

小管打天下

最新推荐文章于 2023-12-01 11:23:23 发布

阅读量338

点赞数

分类专栏： # 网络

本文链接：https://blog.csdn.net/qq_42647547/article/details/120101141

版权

html5 html

网络专栏收录该内容

21 篇文章 1 订阅

订阅专栏

ifram特性： 点击链接、提交表单可在ifram窗口里跳转

一、网页导航

<div class="wrap">
    <aside class="aside-wrap">
        <ul class="nab-list">
            <li class="nav-item">
                <a href="https//www.jd.com" target="navIframe" class="nav-lk">京东商城</a>
            </li>
            <li class="nav-item">
                <a href="https://www.taobao.com" target="navIframe" class="nav-lk">淘宝商城</a>
            </li>
            <li class="nav-item">
                <a href="https://www.tmall.com" target="navIframe" class="nav-lk">天猫商城</a>
            </li>
            <li class="nav-item">
                <a href="https://www.suning.com" target="navIframe" class="nav-lk">苏宁商城</a>
            </li>
        </ul>
    </aside>
    <section class="frame-wrap">
        <iframe src="https://www.taobao.com" name="navIframe"></iframe>
    </section>
</div>

二、代码编辑器

//index.html
<div class="warp">
    <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="edit-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>

//script.php
<?php
    if(isset($_POST['codes'])){
        $codes = $_POST['codes'];
    } else {
        $codes = 'document.write("欢迎使用在线代码编辑器")';
    }
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script>
        <?php echo $codes ?>
    </script>
</body>
</html>