时间戳

首页 > 解决方案 > 自动改变框架高度似乎只会改变它里面的窗口的高度

html - 自动改变框架高度似乎只会改变它里面的窗口的高度

问题描述

我对这些东西完全陌生，所以如果问题真的很简单，我很抱歉占用你的时间。基本上我正在尝试根据内部文本区域的大小自动更新 iframe 高度。此文本区域还会根据其中的内容自动更改高度。但我认为发生的只是里面的窗口改变了高度。我认为里面的窗口正在改变高度，因为当可滚动打开时，并且 iframe 大小更改代码在其中，窗口似乎会随着内容改变大小。如果没有 iframe 大小调整代码，里面的窗口只是默认大小。这是 iframe 中的代码：

<?php

include_once('../includes/connection.php');
include_once('../includes/article.php');

$article = new Article;
$id =$_GET['id'];

$data = $article->fetch_data($id);

if (isset($_POST['content'])) {
    $content = $_POST['content'];
    $uid =$_GET['id'];

    $query = $pdo->prepare("UPDATE articles SET article_content='$content' WHERE article_id='$id'");

    $query->execute();?>
    <script>parent.location.href=parent.location.href</script>


        <?php }?> 

<script>
function textAreaAdjust(element){
     element.style.height = "auto"
     element.style.height = (25+element.scrollHeight)+"px";}
     </script>
     <script>
     function dun(){
window.parent.document.getElementById('iframeDisplay').style.height = "auto";
window.parent.document.getElementById('iframeDisplay').style.height = (40+window.parent.document.getElementById.scrollHeight)+"px";
}
     </script>


<link rel="stylesheet" href="../Assets/style2.css" />    
<form action="editbox.php?id=<?php echo $id ?>" method="post" autocomplete="off">    
<textarea autofocus="true" onfocus="textAreaAdjust(this);" onkeyup="textAreaAdjust(this); dun()" width="100%" placeholder="Content" name="content" ><?php echo $data['article_content']?></textarea><br /><br />
<input type="Submit" value="Add article" />
</form>

iframe 父级的代码：

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<?php

session_start();

include_once('../includes/connection.php');
include_once('../includes/article.php');
$article = new Article;

if (isset($_SESSION['logged_in'])) {
if (isset($_GET['id'])) {
    $id =$_GET['id'];
    $data = $article->fetch_data($id);
}

    ?>

    <html>
        <head>
            <title>cms thing</title>
            <link rel="stylesheet" href="../Assets/style.css" />
               <meta name="apple-mobile-web-app-capable" content="yes">
        </head>
        <body>
  <div id="iframeDisplay"></div>  

  

<script>
    function displayIframe() {
        document.getElementById("iframeDisplay").innerHTML = "<iframe id=\"iframeDisplay\" scrolling=\"no\" src=\"editbox.php?id=<?php echo $id ?>\"></iframe>";
    }
</script>
<script>
    function saveText() {
        var xr = new XMLHttpRequest();
        var url = "saveNewText.php?id=<?php echo $id ?>";
        var text = document.getElementById("editable").innerHTML;
        var vars = "newText="+text;
        console.log(text)
        xr.open ("POST", url, true)
        xr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        xr.send(vars);}

        $("#files").change(function() {
  filename = this.files[0].name
  console.log(filename);
});


    
</script>

            <div class="container">
            <a href="index.php" id="logo">CMS</a>

           
           <h4 id="editable" onclick="this.contentEditable=true;" onblur="saveText()"><?php echo $data['article_title'] ?></h4>
      <h4>
           <small>
                 - posted <?php echo date('l jS', $data['article_timestamp']);?>
                </small><h4>
                    <p  ondblclick="displayIframe()"><?php echo $data['article_content']; ?></p>
                    
                    <div class="contaner">
                    <img src="<?php echo $data['article_img']; ?>" width="600" height="400" />
                    <form action="uploads.php?id=<?php echo $id ?>" method="post" enctype="multipart/form-data">
                    <label for="files" class="btn">New Image</label>
                    <input id="files" style="visibility:hidden;" type="file" name="file" onchange="document.getElementById('submitt').click()">
                    <button id= "submitt" type="submit" name="submit"></button>
                    </form>
                    </div>

            <a href="edit.php">&larr; Back</a>
            </div>
        </body>
    </html>
    <?php
}
else{
    header('Location: edit.php');
    exit();
}

?>

框架CSS：

iframe {
    width:80%;
    top:50%;
    left:50%;
    -webkit-transform: translateY(-50%);
    -webkit-transform: translateX(-50%);
    position:fixed;
    border:none;
    border-radius:25px;
}

再次，如果这是一个简单的错误，我很抱歉，但任何帮助将不胜感激，在此先感谢您。

标签： htmliframeresize

解决方案

推荐阅读