iframe 자동 적응 높이 + 위 내비게이션 아래 iframe 레이아웃 + 왼쪽 고정 오른쪽 자동 적응 레이아웃

직접 부호

iframe 코드


<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Documenttitle>
    <style>
        *{
            margin:0;
            padding:0;
        }
        .nav{
            width:100%;
            background:red;
        }
        .nav ul{
            margin:auto;
            width:600px;
            height:30px;
        }
        .nav li{
            float:left;
            list-style:none;
            width:100px;
            text-align:center;
            background:green;
            margin-right:20px;
            line-height: 31px;
        }
        .nav li a{
            text-decoration: none;
            color:#000;
        }
    style>
head>
<body>
    <div class="nav">
        <ul>
            <li><a href="javascript:void(0)">iframe1a>li>
            <li><a href="javascript:void(0)">iframe2a>li>
            <li><a href="javascript:void(0)">iframe3a>li>
            <li><a href="javascript:void(0)">iframe4a>li>
            <li><a href="javascript:void(0)">iframe5a>li>
        ul>
    div>
  <iframe width="100%" src="iframe1.html" id="myiframe" scrolling="no" frameborder="0">iframe>
  <script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js">script>
  <script>
    $(function(){
        $('.nav li a').click(function(){
            $("#myiframe").attr('src',$(this).text()+'.html');
        })
    })
  script>
body>
html>

iframe1-5.html 코드


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>iframetitle>
    <style> 
    body{
        width:100%;
    }
    *{
        margin:0;
        padding:0;

    }
     .sidebar{
            width: 300px;
            height: 300px;
            background-color: pink;
            float:left;
        }
        .content{
            margin-left: 300px;
            height: 100px;
            background-color: blue;
        }
        .footer{
            background-color: red;
            text-align:center;
        }
        .outer:after{
            display: block;
            content:'';
            clear: both;
            visibility: hidden;
        }
        .outer{
            zoom:1;
        }
    style>
head>
<body>

    <div class="outer">
        <div class="sidebar">     111div>
        <div class="content">    div>
    div>
    <div class="footer">     DIV，                 div>

    <script>
        parent.document.getElementById("myiframe").height=0;
        parent.document.getElementById("myiframe").height=document.body.scrollHeight;
    script>
body>
html>

iframe에 크로스 문제가 있기 때문에nginx 등 도구를 사용하여 로컬로 프록시하십시오

구체적:

1. nginx 2.설정 파일 conf=>nginx를 찾았습니다.conf 3.프로필 http=>server=>listen

주의

1.nginx는 중국어 이름 경로 아래에 있을 수 없습니다.인터넷의 각종 것은 모두 구덩이이다!!!!(원본 코드를 주지 않고 여러 번 말하며 시간을 낭비한다)

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

puppeteer로 iframe의 요소를 조작합니다.

iframe내에 버튼을 준비해, 그 버튼을 누르면 버튼의 색이 바뀌는 만큼의 페이지를 만듭니다. app/index.html app/iframe.html puppeteer의 코드를 작성합니다. app/script.js...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

iframe 자동 적응 높이 + 위 내비게이션 아래 iframe 레이아웃 + 왼쪽 고정 오른쪽 자동 적응 레이아웃

직접 부호

구체적:

주의

좋은 웹페이지 즐겨찾기