当前位置： 文江博客话题详情

在 php/html 中创建类似框架的结构？

发布于 2024-12-27 23:13:42 字数 5698 浏览 0 评论 0原文

我需要创建一个具有两个框架状结构的页面。在左侧，我总是想显示一个包含大约 10 个条目的小表单，在单击提交按钮后执行一些处理并显示结果。我需要始终能够访问左侧部分。右侧部分用于处理数据、访问数据库和显示结果。 早些时候，我创建了一个带有框架的页面，但在 chrome 方面存在一些问题，并且事实上名声已被贬低，我想切换到其他结构。 我对 php 和 html 很满意。有人建议我使用ajax，但我对此为零。

如何实现具有加载不同文件的两个部分的类似框架的结构？ 谢谢

我不想使用框架的原因如下：

我有一个 testframe.php 文件，它将 testinpform.php 加载到右侧 包含创建 3 个按钮的代码的框架。当我加载时 testframe.php，它显示了右框架中的所有按钮以及所有 按钮第一次按预期工作。一旦有一个按钮 单击后，单击后所有按钮都不起作用。当我搬到 使用其他链接的其他页面然后返回，然后这些 按钮再次开始工作。

此行为仅由 Chrome 浏览器显示。 如果我不使用框架而只加载 testinpform.php，则所有按钮 按要求工作。

在 Firefox 中，无论有没有框架，相同的代码都可以正常工作。

那么，这是 Chrome 的问题还是我需要在代码中添加一些内容 使其适用于所有浏览器。

我的代码如下。

testframe.php

<?php
function generateFrames() {
echo "<FRAMESET  COLS=\"360,*\">\n";
echo "<FRAME noresize NAME=\"input\" SRC=\"otherfile.php?page=left\">\n";
echo "<FRAME NAME=\"output\" SRC=\"testinpform.php?page=right\">\n";
echo "</FRAMESET>";
}

if($page=="left") {
echo "<BODY BGCOLOR=\"#FFFFFF\">";
echo "<FONT FACE=\"Arial,Verdana,Helvetica\" COLOR=\"FF0000\" SIZE=\"3\">PHP Tester</FONT>";
echo "<FORM METHOD=\"get\" ACTION=\"processForm.php?page=right\"TARGET=\"output\">\n";
echo "<TABLE BORDER=\"0\" CELLSPACING=\"0\" CELLPADDING=\"0\">\n";
echo "<TR><TD><TEXTAREA NAME=\"input\" COLS=\"100\" ROWS=\"40\"
WRAP=\"virtual\">".$input."</TXTAREA></TD></TR>\n";
echo "<TR><TD ALIGN=\"center\"><INPUT TYPE=\"submit\"
VALUE=\"Execute\"></TD></TR></TABLE></FORM>\n";
echo "</BODY>";
}

else if ($page=="right") {
echo "<BODY BGCOLOR=\"#FFFFFF\">";
if(empty($input)) {
echo "Ready to parse...";
}
else {
$input=stripSlashes($input);
eval($input); 
}
echo "</BODY>"; 
}

else {
generateFrames();
}
?>

testinpform.php

<?php
$filenames =  array("file1.txt", "file2.txt", "file3.txt");
$namesToshow = array("file1", "file2", "file3");
$numfiles = count($filenames);

for ($i = 0; $i< $numfiles; $i++)
 {
 echo"<form enctype=multipart/form-data method=GET
 action='viewResult.php' target='_blank' >";
 echo"<input type='hidden' name='filetoview' value= $filenames[$i] >";
 echo"<input type='submit' value= $namesToshow[$i] >";
 echo'</FORM>';
  }

 echo"<a href= abc.com>click here to go to next page and then come back using the back button>";
 ?>

谢谢

@Silvertiger 感谢您的回复。 我正在查看您的代码并尝试根据我的需要对其进行自定义。

我举一个最简单的例子来说明我的情况。

frame.php 包含@silvertiger 建议的代码。

在左侧部分，我想包含“inputform.php”，它具有（例如）以下代码：

<form name="secondForm" method="POST" enctype="multipart/form-data" action = 'process.php' target = "output">      
<input type="hidden" name="organism" value="human" >
Enter the input in the text box:<br />
<textarea name="textArea" cols="40" rows="6" >Enter your query here</textarea> <br />
<input type="submit" value="submit" class="html-text-box"> 
</form>

当我调用frame.php并按提交按钮时，输入表单将所有数据传递给process.php，它将显示其结果在右半部分。

process.php 文件是：

<?php
$organism= $_POST['organism'];
$textArea = $_POST['textArea'];
print ("\n$organism, $textArea");
?>

我需要在下面的frame.php 文件中进行哪些更改：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Some Page</title>
        <script type="text/javascript" src="includes/jquery-1.5.1.min.js"></script>
        <script type="text/javascript">
            function loadform1() {
                jQuery.ajax({ // create an AJAX call...
                    data: jQuery('#myform1').serialize(), // get the form data
                    type: 'POST', // GET or POST
                    url: 'process.php', // the file to call
                    success: function(response) { // on success..             
                        $('#displaydata').html(response); // update the DIV
                    }
                // might need to add a return false here so the page won't reload
                });
            };            
        </script>
    </head>
    <body>
        <div style="float:left;width:50%;">
            <form id="myform1" name="myform1" onsubmit="loadform1()">
                <div style="float:left; width: 150px;">Criteria 1</div>
                <div style="float:left; margni-right: 20px;">
                    <input type="text" name="criteria1" value="" />
                </div>
                <div style="clear:both; height: 30px;"></div>
                <div style="float:left; width: 150px;">Criteria 2</div>
                <div style="float:left; margni-right: 20px;">
                    <input type="text" name="criteria2" value="" />
                </div>
                <div style="clear:both; height: 30px;"></div>
                <input type="submit" value="Show Form 1 results" />

            </form>            
     <div style="clear:both; height: 30px;"><hr></div>         
        </div>

        <div id="displaydata" style="float:left;width:50%; text-indent: 30px;">
        <?php include('defaultpage.php'); ?>
        </div>
    </body>
</html>

非常感谢。

原文

I need to create a page having two, frame like structure. On left I always want to show a small form with around 10 entries which after clicking the submit button perform some processing and shows result. I need to have access to the left part at all times. The right part is for processing data, accessing database and display results.
Earlier I created a page with frames but has some issues with chrome and the fact that fame is depricated, I want to swich to some other structure.
I am comfortable with php and html. Someone suggested me ajax but I am zero in that.

How can I accomplish frame like structure having two parts that load different files?
Thanks

The reason I dont want to use frame is given below:

I have a testframe.php file that loads testinpform.php into right
frame containing code to create 3 buttons. when I load the
testframe.php, It shows all the the buttons in the right frame and all
the buttons work as desired for the first time. once a button is
clicked, none of the buttons work after that click. When I move to
some other page using some other link and come back, then these
buttons start working again.

This beavior is shown only by Chrome browser.
If I do not use frame and just load testinpform.php, all the buttons
work as desired.

In firefox, the same code work pefectly fine with or without frame.

So, Is this a problem of chrome or I need to add something in my code
to make it work in all browsers.

My code is as follows.

testframe.php

<?php
function generateFrames() {
echo "<FRAMESET  COLS=\"360,*\">\n";
echo "<FRAME noresize NAME=\"input\" SRC=\"otherfile.php?page=left\">\n";
echo "<FRAME NAME=\"output\" SRC=\"testinpform.php?page=right\">\n";
echo "</FRAMESET>";
}

if($page=="left") {
echo "<BODY BGCOLOR=\"#FFFFFF\">";
echo "<FONT FACE=\"Arial,Verdana,Helvetica\" COLOR=\"FF0000\" SIZE=\"3\">PHP Tester</FONT>";
echo "<FORM METHOD=\"get\" ACTION=\"processForm.php?page=right\"TARGET=\"output\">\n";
echo "<TABLE BORDER=\"0\" CELLSPACING=\"0\" CELLPADDING=\"0\">\n";
echo "<TR><TD><TEXTAREA NAME=\"input\" COLS=\"100\" ROWS=\"40\"
WRAP=\"virtual\">".$input."</TXTAREA></TD></TR>\n";
echo "<TR><TD ALIGN=\"center\"><INPUT TYPE=\"submit\"
VALUE=\"Execute\"></TD></TR></TABLE></FORM>\n";
echo "</BODY>";
}

else if ($page=="right") {
echo "<BODY BGCOLOR=\"#FFFFFF\">";
if(empty($input)) {
echo "Ready to parse...";
}
else {
$input=stripSlashes($input);
eval($input); 
}
echo "</BODY>"; 
}

else {
generateFrames();
}
?>

testinpform.php

<?php
$filenames =  array("file1.txt", "file2.txt", "file3.txt");
$namesToshow = array("file1", "file2", "file3");
$numfiles = count($filenames);

for ($i = 0; $i< $numfiles; $i++)
 {
 echo"<form enctype=multipart/form-data method=GET
 action='viewResult.php' target='_blank' >";
 echo"<input type='hidden' name='filetoview' value= $filenames[$i] >";
 echo"<input type='submit' value= $namesToshow[$i] >";
 echo'</FORM>';
  }

 echo"<a href= abc.com>click here to go to next page and then come back using the back button>";
 ?>

Thanks

@Silvertiger
Thanks for your reply.
I am looking at your code and try to customize it according to my need.

I am giving the simplest example for my case.

frame.php contains the code suggested by @silvertiger.

In the left part, I want to include "inputform.php" that has (for example) following code:

<form name="secondForm" method="POST" enctype="multipart/form-data" action = 'process.php' target = "output">      
<input type="hidden" name="organism" value="human" >
Enter the input in the text box:<br />
<textarea name="textArea" cols="40" rows="6" >Enter your query here</textarea> <br />
<input type="submit" value="submit" class="html-text-box"> 
</form>

When I call frame.php and press the submit button, the input form pass all the data to process.php which will show its result on the right half.

process.php file is:

<?php
$organism= $_POST['organism'];
$textArea = $_POST['textArea'];
print ("\n$organism, $textArea");
?>

What changes do I need in the frame.php file below:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Some Page</title>
        <script type="text/javascript" src="includes/jquery-1.5.1.min.js"></script>
        <script type="text/javascript">
            function loadform1() {
                jQuery.ajax({ // create an AJAX call...
                    data: jQuery('#myform1').serialize(), // get the form data
                    type: 'POST', // GET or POST
                    url: 'process.php', // the file to call
                    success: function(response) { // on success..             
                        $('#displaydata').html(response); // update the DIV
                    }
                // might need to add a return false here so the page won't reload
                });
            };            
        </script>
    </head>
    <body>
        <div style="float:left;width:50%;">
            <form id="myform1" name="myform1" onsubmit="loadform1()">
                <div style="float:left; width: 150px;">Criteria 1</div>
                <div style="float:left; margni-right: 20px;">
                    <input type="text" name="criteria1" value="" />
                </div>
                <div style="clear:both; height: 30px;"></div>
                <div style="float:left; width: 150px;">Criteria 2</div>
                <div style="float:left; margni-right: 20px;">
                    <input type="text" name="criteria2" value="" />
                </div>
                <div style="clear:both; height: 30px;"></div>
                <input type="submit" value="Show Form 1 results" />

            </form>            
     <div style="clear:both; height: 30px;"><hr></div>         
        </div>

        <div id="displaydata" style="float:left;width:50%; text-indent: 30px;">
        <?php include('defaultpage.php'); ?>
        </div>
    </body>
</html>

Thanks a lot.

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（3）

╭ゆ眷念 2025-01-03 23:13:42

使用框架集：

<frameset cols="25%,*,25%">
  <frame src="frame_a.htm" />
  <frame src="frame_b.htm" />
  <frame src="frame_c.htm" />
</frameset>

Use framesets:

<frameset cols="25%,*,25%">
  <frame src="frame_a.htm" />
  <frame src="frame_b.htm" />
  <frame src="frame_c.htm" />
</frameset>
回复 原文
合久必婚 2025-01-03 23:13:42

一种使用 JQuery 实现无框架的方法。您必须获得一份副本，我在这里使用的 jquery 版本有点旧，但示例仍然有效，并且它并不像您想象的那么令人生畏。左侧的静态表单包含您希望提交/跟踪的变量，然后是 JQuery 调用（只是 javascript），我调用 div 中另一个页面的加载。所有动态，无需重新加载页面等。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Some Page</title>
        <script type="text/javascript" src="includes/jquery-1.5.1.min.js"></script>
        <script type="text/javascript">
            function loadform1() {
                jQuery.ajax({ // create an AJAX call...
                    data: jQuery('#myform1').serialize(), // get the form data
                    type: 'POST', // GET or POST
                    url: 'form1resultpage.php', // the file to call
                    success: function(response) { // on success..             
                        $('#displaydata').html(response); // update the DIV
                    }
                // might need to add a return false here so the page won't reload
                });
            };
            function loadform2() {
                jQuery.ajax({ // create an AJAX call...
                    data: jQuery('#myform2').serialize(), // get the form data
                    type: 'POST', // GET or POST
                    url: 'form2resultpage.php', // the file to call
                    success: function(response) { // on success..             
                        $('#displaydata').html(response); // update the DIV
                    }
                // might need to add a return false here so the page won't reload
                });
            };
        </script>
    </head>
    <body>
        <div style="float:left;width:50%;">
            <form id="myform1" name="myform1" onsubmit="loadform1()">
                <div style="float:left; width: 150px;">Criteria 1</div>
                <div style="float:left; margni-right: 20px;">
                    <input type="text" name="criteria1" value="" />
                </div>
                <div style="clear:both; height: 30px;"></div>
                <div style="float:left; width: 150px;">Criteria 2</div>
                <div style="float:left; margni-right: 20px;">
                    <input type="text" name="criteria2" value="" />
                </div>
                <div style="clear:both; height: 30px;"></div>
                <input type="submit" value="Show Form 1 results" />
            </form>
            <div style="clear:both; height: 30px;"><hr></div>
            <form id="myform2" name="myform2" onsubmit="loadform2()">
                <div style="float:left; width: 150px;">Criteria 1</div>
                <div style="float:left; margni-right: 20px;">
                    <input type="text" name="criteria1" value="" />
                </div>
                <div style="clear:both; height: 30px;"></div>
                <div style="float:left; width: 150px;">Criteria 2</div>
                <div style="float:left; margni-right: 20px;">
                    <input type="text" name="criteria2" value="" />
                </div>
                <div style="clear:both; height: 30px;"></div>
                <input type="submit" value="Show form 2 results" />
            </form>
        </div>
        <div id="displaydata" style="float:left;width:50%; text-indent: 30px;">
            This is the display page, it will change            
        </div>
    </body>
</html>

那么只需为要显示的每个“功能”创建一个表单，然后复制/粘贴并修改 jquery 调用以将另一个表单提交到另一个页面...我会编辑示例以具有 2 种形式:)。如果您只需要 1 个表单来执行具有 10 或 12 个字段的功能，请删除“myform2”内容，然后就可以开始了！

A way to do it without frames using JQuery. You would have to get a copy, the jquery version I use here is a bit old, but the sample is still valid and it is not as intimidating as you might think. A static form on the left that has the variables you wish to submit/track, and then a JQuery call (just javascript) i call the loading of the other page within a div. all dynamic, no page reload required etc.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Some Page</title>
        <script type="text/javascript" src="includes/jquery-1.5.1.min.js"></script>
        <script type="text/javascript">
            function loadform1() {
                jQuery.ajax({ // create an AJAX call...
                    data: jQuery('#myform1').serialize(), // get the form data
                    type: 'POST', // GET or POST
                    url: 'form1resultpage.php', // the file to call
                    success: function(response) { // on success..             
                        $('#displaydata').html(response); // update the DIV
                    }
                // might need to add a return false here so the page won't reload
                });
            };
            function loadform2() {
                jQuery.ajax({ // create an AJAX call...
                    data: jQuery('#myform2').serialize(), // get the form data
                    type: 'POST', // GET or POST
                    url: 'form2resultpage.php', // the file to call
                    success: function(response) { // on success..             
                        $('#displaydata').html(response); // update the DIV
                    }
                // might need to add a return false here so the page won't reload
                });
            };
        </script>
    </head>
    <body>
        <div style="float:left;width:50%;">
            <form id="myform1" name="myform1" onsubmit="loadform1()">
                <div style="float:left; width: 150px;">Criteria 1</div>
                <div style="float:left; margni-right: 20px;">
                    <input type="text" name="criteria1" value="" />
                </div>
                <div style="clear:both; height: 30px;"></div>
                <div style="float:left; width: 150px;">Criteria 2</div>
                <div style="float:left; margni-right: 20px;">
                    <input type="text" name="criteria2" value="" />
                </div>
                <div style="clear:both; height: 30px;"></div>
                <input type="submit" value="Show Form 1 results" />
            </form>
            <div style="clear:both; height: 30px;"><hr></div>
            <form id="myform2" name="myform2" onsubmit="loadform2()">
                <div style="float:left; width: 150px;">Criteria 1</div>
                <div style="float:left; margni-right: 20px;">
                    <input type="text" name="criteria1" value="" />
                </div>
                <div style="clear:both; height: 30px;"></div>
                <div style="float:left; width: 150px;">Criteria 2</div>
                <div style="float:left; margni-right: 20px;">
                    <input type="text" name="criteria2" value="" />
                </div>
                <div style="clear:both; height: 30px;"></div>
                <input type="submit" value="Show form 2 results" />
            </form>
        </div>
        <div id="displaydata" style="float:left;width:50%; text-indent: 30px;">
            This is the display page, it will change            
        </div>
    </body>
</html>

then it's just a matter of creating a form per "function" you with to display, and then copy/pasting and modifying the jquery call to submit the other form to another page... I will edit the example to have 2 forms :). If you just need 1 form that performs functions with 10 or 12 fields, remove the "myform2" stuff and you're good to go!!!

回复 原文
烟雨扶苏 2025-01-03 23:13:42

参见下文

myFile.html

<frameset cols="25%,*">
<frame src="myFileA.html" />
<frame src="myFileB.html" name="main"/>
</frameset>

myFileA.html

<html>
<body>
<a href="a.html" target="main">File A</a><br>
<a href="b.html" target="main">File B</a><br>
<a href="c.html" target="main">File C</a>
</body>
</html>

myFileB.html

<html>
<body>
Default Page
</body>
</html>

同时创建 a.html、b。 html 和 c.html。

在浏览器中打开 myFile.html 并查看 MAGIC...

如果需要其他内容，请告诉我！

祝你好运！！！干杯！！！

See below

myFile.html

<frameset cols="25%,*">
<frame src="myFileA.html" />
<frame src="myFileB.html" name="main"/>
</frameset>

myFileA.html

<html>
<body>
<a href="a.html" target="main">File A</a><br>
<a href="b.html" target="main">File B</a><br>
<a href="c.html" target="main">File C</a>
</body>
</html>

myFileB.html

<html>
<body>
Default Page
</body>
</html>

Also create a.html, b.html and c.html.

Open myFile.html in browser and see the MAGIC...

Let me know if something else is needed!!!

Good Luck!!! Cheers!!!

回复 原文
~没有更多了~

关于作者

梦毁影碎の

暂无简介

文章
评论
26 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

梦屿孤独相伴

文章 0 评论 0

(devoted boy)

文章 0 评论 0

qq_pnDqVb

文章 0 评论 0

疯到世界奔溃

文章 0 评论 0

lock

文章 0 评论 0

niuniu

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文