Question

我如何能够将我的所有login / profile.php文件加载到一个特定的div中，而又不影响或重新加载网站的其余部分？我曾考虑过使用$ _GET变量来保持父URL不变，并且在导航菜单中使用了相同的策略，所有页面均加载到我的#back_drop div中。

下面，我整理了网站外观的非常基本的版本，如您所见，＃side_panel是我希望将所有登录名/配置文件加载到的地方，而导航，内容和页脚不受以下影响#side_panel的作用。我希望能够在此div内登录，注销，获取错误，重设密码等，而无需重新加载我网站的主要部分。

我有一个 index.php 文件，这是我的主要索引，其中包含我的页眉，旁边，内容和页脚，然后我有一个与我的登录表单相关的php文件的完整文件夹以及将加载到我的主要内容页面中的其他文件。我不想分开每个包含，因此在每个包含之前先在下面添加注释，并指出它们是分开的，以便您可以看到我正在使用的内容。

我当前正在使用iframe加载我的登录文件，因为这是获取所需内容的最简单方法，但有时会很烦人，尤其是当我注销并且需要登录的页面仍然存在时，除非页面已刷新，这似乎是一个主要的安全问题。

我试图在我的#side_panel中使用一个include函数，但是如果我尝试登录，它要么无法连接，要么最终会通过父URL登录，具体取决于我如何编辑login.php文件。我正在考虑使用$ _GET变量，但不确定如果变量位于url中却无法想到任何其他方式，那么这是否会成为安全问题

index.php <-我的主索引页面

<?php
$page = $_GET['page'];

if (!$page) {
    $page = 'Home';
}

include('includes/header.php');

echo "<div id='back_drop'><div id='content'>";
include('php/'.strtolower($page).'.php');
echo "</div></div>";

include('includes/footer.php');

?>

aside.php <-其中包含我的登录名/配置文件的

<iframe src="php/index.php" height="500px" width="100%" style="position: relative; border:none;"></iframe>

$(document).ready(function(){
  $("#show_login").click(function(){
    $("#side_panel").toggle("slide");
    $("#side_panel").toggleClass("slide");
    $(this).find('img').toggle();

    if ($("#side_panel").hasClass("slide")) {
      $("#back_drop").animate({'padding-left': '0'}, 300);
    } else {
      $("#back_drop").animate({'padding-left': '230px'}, 300);
    }
  });
});

* {
    margin: 0;
    padding: 0;
}

a {
    outline: 0;
}

body {
    width: 100%;
    -webkit-box-pack: center;
    background-color: #CCC;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

header, nav, section, aside, footer, article {
    display: block;
}
#big_wrapper {
    text-align: left;
    width: 100%;
    display: -webkit-box;
    display: -moz-box;
    -webkit-box-orient: vertical;
    -webkit-box-flex: 1;
}

#top_header {
    position: fixed;
    width: 100%;
    text-align: left;
    padding-top: 4px;
    padding-bottom: 2px;
    padding-left: 4px;
    border-bottom: 2px solid #262626;
    border-radius: 3px 3px 0 0;
    background-color: #404040;
    box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.2), 2px 0 2px 2px rgba(0, 0, 0, 0.19);
    z-index: 9999;
}
#back_drop {
    background-color: #CCC;
    padding-top: 10px;
    padding-left: 230px;
    max-width: 100%;
}
#content {
   border: 5px solid red;
   height: 500px;
}
#show_login {
    float: left;
    width: 24px;
    padding-top: 12px;
    padding-left: 5px;
    height: auto;
    cursor: pointer;
    -webkit-user-drag: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
}
#show_login:active {
    width: 23px;
    padding-top: 13px;
    padding-right: 1px;
}
#side_panel {
    position: fixed;
    background-color: #a19b9b;
    color: #000;
    margin-top: 54.491px;
    width: 230px;
    height: 100%;
    word-wrap: break-word;
    z-index: 9999;
    transform: translateX(0);
}
.slide {
  transform: translateX(0);
}
#main_section {
    clear: right;
    text-align: center;
    margin-right: auto;
}
#bottom_footer {
    clear: both;
    text-align: center;
    padding: 20px;
    background-color: #404040;
}

<!-- header.php -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
</head>
<body>
<div id='big_wrapper'>
    <header id='top_header'>
     <nav id="navigation">
        <div id="show_login">
         <button>Show</button>
        </div>
        <div id="main_menu">
        <!--Navigation header menu
        <?php
         $sections = array('Home','nav1','nav2','nav3','nav4','nav5');

         foreach($sections as $row) {
            echo "<li id='menu_list'><a href='index.php?page=$row'&login='$login'";

           if ($row==$page) {
              echo "class='active'";
              }
              echo ">$row</a>";
             }
         ?>-->
            </div>
        </nav>
    </header>
</div>

<div id='side_panel'>
    <div id='login_contain'>
    <!-- aside.php -->
    #side_panel<br>
    Where my login/profile pages load in
    </div>
</div

<!-- This is what is actually in my code. Commented to show in snippet
<?php
   echo "<div id='side_panel'><div id='login_contain'>";
   include('includes/aside.php');
   echo "</div></div>";
?>
-->

<div id='back_drop'>
    <div id='content'>
    #back_drop<br>
    All my navigation links load only in this div by using href='index.php?page=(($_GET['page']))' and if I could do the same thing maybe for my #side_panel to include all my login/profile pages
    </div>
</div>

<!--footer.php -->
<div class="footer_nav">
   <!--Navigation footer menu
   <?php
     $sections = array('Home','nav1','nav2','nav3','nav4','nav5');

     foreach($sections as $row) {
       echo "<li><a href='index.php?page=$row'>$row</a></li>\n";
              }
       ?>
        -->
</div>
<footer id='bottom_footer'>
</footer>
</body>
</html>

Answer 1

在此处耦合事物：

您将为此使用AJAX，iFrame不适合您的需求
不确定示例脚本中代表了多少动态页面系统，但是您应该检查$_GET上的页面调用，如果有人测试了$_GET并且包括一个不应该的页面。

/index.php

<?php
# Create an allow array (or have these in a database)
$public = array(
    'home',
    'about'
    'contact'
);
# Check that it's not empty. If not empty, make sure it's allowed. Use home as default
$page = (!empty($_GET['page']) && in_array(strtolower($_GET['page']), $public))? $_GET['page'] : 'home';
# Include normally
include('includes/header.php') ?>

<div id='back_drop'>
    <ul>
        <li><a href="home">Home</a></li>
        <li><a href="contact">Contact</a></li>
        <li><a href="about">About</a></li>
    </ul>
    <div id='content'>
        <?php include('php/'.$page.'.php') ?>
    </div>
</div>
<!-- add jquery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(function(){
    // On clicking the menu link
    $('li > a').on('click',function(e){
        // Stop the link from reloading page
        e.preventDefault();
        // Create ajax
        $.ajax({
            // Send request as GET
            'type': 'get',
            // Send to the index page
            'url': '/index.php',
            // equivalent of ?page={pagename}
            'data': {
                'page': $(this).attr('href')
            },
            // When request comes back, find the content and place just the content
            // into this page's content
            success: function(response) {
                // "response" is what is coming back from the ajax all
                // Find the content from the returned html
                var getContent = $(response).find('#content').html();
                // Place it into this page's content id
                $('#content').html(getContent);
            }
        });
    });
});
</script>
<?php include('includes/footer.php') ?>

PHP将登录文件加载到div中，而无需重新加载url

1 个答案: