Question

我有一个框架为2帧的页面，左侧有一些带有一些复选框等的公式，右边是一个基于左边提交的表格的图形预览。这个工作到目前为止，我只有问题，我提交的文件中的css没有显示，直到我提交表单。因此默认预览页面不会显示任何css。在具有表单的文件中我有这段代码：

<form name = "fontform" action="preview.php" target="preview">

并在preview.php文件中我有css的正常标记：

<link rel="stylesheet" type="text/css" href="css.css">

为什么在我提交之前不会显示？

的index.php：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> 
<link rel="stylesheet" type="text/css" href="./css.css">
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<frameset cols = "50%, 50%">
<frame src ="fontselect.php" name="fontselect" id ="fontselect">
<frame src ="preview.php?text='Ein Text'&color=6&font=arial.ttf&size=5&showinfo=1" name = "preview" id ="preview">
</frameset>
</html>

fontselect.php：

<?php
session_start();
?>

<link rel="stylesheet" type="text/css" href="css.css">
<script src="http://code.jquery.com/jquery-latest.js"></script>
<?php
include("core.php");

$queryString = $_SERVER["QUERY_STRING"];


$strFontDir = "fonts/";
$strImageGenerator = "imagegenerator.php";

$arrFontFiles = null;
$i = 0;
$dir = opendir($strFontDir);
while(($strFile = readdir($dir)) !== false )
    if($strFile != ".." && $strFile != "." && (endsWith($strFile, ".ttf") || endsWith($strFile, ".otf")))
        $arrFontFiles[$i++] = $strFile;
$cols =3;       

$radioButtonName = "font";

?>

<div id ="mainDiv">
<form name = "fontform" action="preview.php" target="preview">
<div id = "optionsDiv">
    <div style ="margin-bottom:10px;">  Text:<textarea name="text" maxlenght="25" style = "width:100%; resize:vertical;" cols="20" wrap="off" maxlength="25">Ein Text</textarea><br>    </div>

    <div id ="colorDiv">    <?php include("palette.php"); ?>    </div>

    <div style ="float:left; width:100%;">  Hilfslinien Anzeigen: <input type = "checkbox" name = "showInfo" value ="1" checked>    </div>

    <div style ="float:left; width:100%">   Schriftgröße <select name = "size"> <?php for($i=$minSize; $i<=$maxSize;$i++) echo "<option>".$i."</option>" ?></select>cm</div>


    <div style ="float:left; width:100%">
    <script src ="jscolor/jscolor.js"></script>
    Hintergrundfarbe (nur für Vorschau): <input name="bgcolor" readonly class="color" >
    </div>

    <div style ="width:100%; float:left;" > <input type="submit" value = "Vorschau >>>" id ="fontselectSubmit"></div>


</div>

<div id ="fontSelectDiv">
 <?php

    if($arrFontFiles != null)
    $col = 0;   
    $loop = 0;
    foreach($arrFontFiles as $fileName)
    {
            echo "<div class =\"fontCellDiv\"> ";

            echo "<input onfocus=\"return false;\" type ='radio' name = ".$radioButtonName." value = \"".$fileName."\"";
            if($loop == 0)
                echo "checked";
            echo ">";
            echo "<img src ='".$strImageGenerator."?font=".$fileName."&size=5&margin=2&color=6'>";
            //echo $fileName;

            echo "</div>";

        $col = ++$col % $cols;
        $loop++;
    }

?>

</div>
</form>
</div>

preview.php：

<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" type="text/css" href="css.css"></link>
</head>
<?php

$previewSize = 100;         //px;

?>
<body style="background-color:green">

<div id ="resultDiv">
    <h1>Vorschau    </h1>
    <div id ="vorschauDiv">

        <?php
            echo "<img id ='previewImg' src =\"imagegenerator.php?".$_SERVER["QUERY_STRING"]."&sizePx=".$previewSize."\">";
        ?>

    </div>

    <?php
        print_r($_GET);
    ?>
</div>


<div id = "finishDiv">


<form name="myForm" action="finish.php" target="_top" onsubmit="return validateForm()" method="post">

<?php

echo "<input type = \"hidden\" name = \"text\" value=\"".$_GET["text"]."\">";
echo "<input type = \"hidden\" name = \"color\" value=\"".$_GET["color"]."\">";
echo "<input type = \"hidden\" name = \"font\" value=\"".$_GET["font"]."\">";
echo "<input type = \"hidden\" name = \"size\" value=\"".$_GET["size"]."\">";
echo "<input type = \"hidden\" name =\"checkID\" value = \"".md5(microtime())."\">";
?>
<input type ="submit" value ="Schriftzug eintragen">

</form>

</div>

<script>

var strText = $("input[name=text]").attr("value");
var strColor = $("input[name=color]").attr("value");
var strFont = $("input[name=font]").attr("value");
var strSize = $("input[name=size]").attr("value");

function onSubmit(){
alert(validateForm());
}

function validateForm(){

    if(strText=="undefined" || !(strText.length>=0 && strText.length<=25)){
        alert("Bitte gültigen Text eingeben");
        return false;
    }

    if(strFont=="undefined" || !(strFont.length>=0 && strFont.length<=35)){
        alert("Bitte eine gültige Schriftart wählen.");
        return false;
    }

    if(isNaN(strColor) || !(+strColor >= 3 && +strColor<=14)){
        alert("Farbe ist ungültig: "+strColor);
        return false;
    }

    if(isNaN(strSize) || !(+strSize <= 16 && +strColor>=4)){
        alert("Größe ist ungültig: "+strSize);
        return false;
    }

    return true;

}

function getQueryVariable(variable)
{
       var query = window.location.search.substring(1);
       var vars = query.split("&");
       for (var i=0;i<vars.length;i++) {
               var pair = vars[i].split("=");
               if(pair[0] == variable){return pair[1];}
       }
       return(false);
}


</script>


</body>

</html>

框架集中的CSS无法正常工作

0 个答案: