javascript - 使用 fopen 复制 html 页面并检查新页面以查找 session 变量

我有一个页面使用 session 变量和 sql 轮询为实时编辑过程动态填充 div 等，然后我需要能够发布将这些变量硬编码到页面中的同一页面。为此，我使用 fopen 复制了 html 以创建新页面。这可行，但有一些烦恼或限制。因为源页面代码没有显示出 php 代码，所以 fopen 无法复制它，所以我不能使用 php 检查是否有 session ID。我希望利用这样一个事实，即新创建的页面上没有允许我检查 session ID 的 php，如果没有，则隐藏新创建的页面上的某些元素。我看过的一些解决方案如下。

1/获取 jquery 检查 php 标签，如果没有则隐藏我需要隐藏的 div。结果:找不到任何可能建议如何执行此操作的代码

2/fopen 只是我需要显示我需要的信息并修改到另一个模板中的 html。结果:fseek 可能有助于将复制的 html 插入到 fseek 指向的特定行中，但是被复制的 div 之一具有长度可变的输入文本，据我所知，如果输入扩展超过 1 行的复制代码可能会覆盖其他代码。如果可能的话，我也没有必要的知识来促进这一点

我需要隐藏的元素是一个打开编辑菜单的按钮，以及编辑菜单本身。

动态页面完整代码(分3个，中间部分我想隐藏

<?php
include_once '../../../includes/db_connect.php';
include_once '../../../includes/functions.php';

sec_session_start();

//error_reporting(E_ALL); ini_set('display_errors', 1);



$first_name = $_SESSION['memberInfo']['memberFirstName'];
$surname = $_SESSION['memberInfo']['memberLastName'];
$hash = $_SESSION['memberInfo']['hash'];
$newTemplateSrc = $_SESSION['memberInfo']['templateSrc'];


$sql = "SELECT * FROM members WHERE firstName = '$first_name' AND surName = '$surname' AND passWord = '$hash'";

$result=mysqli_query($mysqli, $sql);

while($row = mysqli_fetch_array($result) ){
        $dateofBirth = $row['dateofBirth'];
        $deceasedName = $row['deceasedName'];
        $dateofDeath = $row['dateofDeath'];
        $aboutDeceased = $row['aboutDescription'];
        $directoryId = $row['directoryid'];
        $templateFileSrc = $row['templateFileSrc'];
        $deceasedImage = $row['deceasedPhoto'];
};
?>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<!-- TemplateBeginEditable name="doctitle" -->
<title>RIDERS in the SKY CREATE MEMORIAL</title>
<!-- TemplateEndEditable -->
<link rel="stylesheet" type="text/css" href="../../../style/rits2.css">
<link rel="stylesheet" type="text/css" href="../../../Valums-File-Uploader-file-uploader-9991748/client/fileuploader.css">

<style type="text/css">
a:link {
    text-decoration: none;
    color: rgba(135,206,235,1);
}
a:visited {
    text-decoration: none;
    color: rgba(135,206,235,1);
}
a:hover {
    text-decoration: none;
    color: rgba(0,0,0,1);
}
a:active {
    text-decoration: none;
    color: rgba(135,206,235,1);
}
</style>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
</head>

<body>
<div class="container">
  <header>
    <table id="head_top">
      <tbody>
        <tr>
          <td width="10%" rowspan="3" class="logo"><a href="../../../index.html" target="_self"><img src="../../../images/riders-in-the-sky.png" alt="RIDERS IN THE SKY LOGO - CLICKING HERE TAKES YOU TO THE HOME PAGE" title="RIDERS IN THE SKY LOGO - CLICKING HERE TAKES YOU TO THE HOME PAGE" class="logo_image"/></a></td>
          <td width="80%" colspan="3" class="title">RIDERS IN THE SKY </td>
          <td width="10%" rowspan="3" class="login_register"><table class="log_nav">
            <tbody>
              <tr>
                <td><form action="../../../register.php"><input name="register" type="submit" class="register"  title="REGISTER HERE" id="register" value="Register"></form></td>
              </tr>
              <tr>
                <td><form action="../../../login.php"><input name="login" type="submit" class="login" title="LOGIN HERE" id="login" value="Login"></form>
                  </td>
              </tr>
              <tr> </tr>
            </tbody>
          </table></td>
        </tr>
        <tr>
          <td colspan="3" class="title_tagline">MEMORIALS AND FUNERAL RESOURCES FOR BIKERS AND MOTORCYCLISTS</td>
        </tr>
        <tr>
          <td><div class="3but_nav volunteer"><a href="../../../volunteer.php" title="VOLUNTERR HERE">VOLUNTEER</a></div></td>
          <td><div class="3but_nav resource hover"><a href="../../../resources.php" title="FIND FUNERAL RESOURCES HERE">FUNERAL RESOURCES</a></div></td>
          <td><div class="3but_nav about"><a href="../../../about.php" title="FIND OUT MORE ABOUT RIDERSin the SKY HERE">ABOUT US</a></div></td>
        </tr>
      </tbody>
    </table>
    <table class="top_nav">
      <tbody>
        <tr>
          <td class="create"><form><input name="create" type="button" class="create_but" id="create" value="Create Memorial" title="CTREATE A MEMORIAL HERE" onClick="window.location.href='../../../create.php'"></form></td>
          <td class="view"><form><input name="view" type="button" class="view_but" id="view" value="View Memorials" title="VIEW A MEMORIAL HERE" onClick="window.location.href='../../../view.php'"></form></td>
          <td class="faq"><form><input name="faq" type="button" class="faq_but" id="faq" value="Faq's" title="GO TO OUR FAQ's and HELP PAGE" onClick="window.location.href='../../../faq.php'"></form></td>
          <td class="contact"><form><input name="contact" type="button" class="contact_but" id="contact" value="Contact Us" title="NEED TO CONTACT US? CONTACT US HERE" onClick="window.location.href='../../../contact.php'"></form></td>
          <td class="donate"><form><input name="donate" type="button" class="donate_but" id="donate" value="Make a Donation" title="WANT TO MAKE A DONATION TO RIDERSin the SKY? GO TO OUR DONATIONS PAGE" onClick="window.location.href='../../../donation.php'"></form></td>

        </tr>
      </tbody>
    </table>

  </header>
  <!-- TemplateBeginEditable name="content_main" -->
 <main class="content">
<section>
    <div id="deceasedName" class="#" contenteditable="false"><?php echo $deceasedName ?></div>
    <div id="DeceasedDetail" contenteditable="false">
    <div id="dob" contenteditable="false"><?php echo $dateofBirth ?></div>
    <div id="deceasedImage" contenteditable="false"><img class="deceasedImage" src="<?php echo $deceasedImage ?>"></div>
    <div id="dod" contenteditable="false"><?php echo $dateofDeath ?></div>
    <div id="deceasedProfile">
    <h1 id="aboutTitle" contenteditable="false" >About <?php  echo $deceasedName?></h1>
    <h2 id="aboutDesciption" contenteditable="false" ><?php echo $aboutDeceased ?></h2>  
    </div>
    </div>
</section>

我想隐藏的代码区域

  <input id="editMemorial" name="button" type="button" class="editMemorial" value="Edit/Create Memorial">



  <div id="editMenu" class="editMenu" style="display:none">
    <button id="editDOB" class="editMenuNav">Edit/Add D.O.B</button>
    <button id="editPic" class="editMenuNav">Change/Add Deceased Photo</button>
    <button id="editDOD" class="editMenuNav">Edit/Add Deceased D.O.D</button>
    <button id="editDeceasedTitle" class="editMenuNav">Edit/Add About the Deceased Title</button>
    <button id="editDeceasedDescription" class="editMenuNav">Edit/Add About the Deceased</button>    
    <button id="editName" class="editMenuNav">Edit/Add Deceased Name</button>
    <button id="saveEdits" class="editMenuNav">Save Changes</button>      
  </div>  





  </main>

其余的 html 代码

 <!-- TemplateEndEditable -->
  <footer class="footer">
    <div class="breadcrumb">
      <p class="breadcrumb"><a href="../../../resources.php">Funeral Resources</a> | <a href="../../../terms.php">Terms of Use</a> | <a href="../../../privacy.php">Privacy</a> | <a href="../../../about.php">About Us</a> | <a href="../../../contact.php">Contact Us</a> | <a href="../../../faq.php">Faq's</a></p>
      <p class="copyright"><span>©2015 RIDERS IN THE SKY</span></p>
    </div>
</footer>



</div>


<div id="uploadDeceasedImage" style="display: none">
  <div class="uploadText">Due to a limitation in the upload image code<br>Once you have uploaded the Deceased Photo the page will refresh automatically.<br>This will regretably mean you will need to click on the 'Edit/Create Memorial' button to complete editing the text on the memorial page.</div>
  <div id="closeDeceasedUpload">Close Upload X</div>
<noscript>          
  <p>Please enable JavaScript to use file uploader.</p>
     or put a simple form for upload here 
</noscript> 
    <div id="preview">
<img src="../../../images/riders in the sky no text.png" alt="" width="100px" height="100px" class="deceasedThumb"/>
    </div>

<!--<form id="deceasedImageUpload">
        <label class="deceasupload">Upload a Picture of the Deceased</label>
        <input type="file" size="20" id="imageUpload" class=" ">
        <button type="submit" class="saveDeceasedImage">Save Photo</button>
</form>-->
<div id="uploadDeceasedImageWrapper">
</div>




        <input id="file_upload" name="file_upload" type="file" multiple style="display:none">
        <input type="button" id="upload_but" href="javascript:$('#file_upload').uploadifive('upload')" style="display: none" value="Upload Images">





</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="../../../Valums-File-Uploader-file-uploader-9991748/client/fileuploader.js"></script>

<script type="text/javascript">

$(".editMemorial").on('click', function() {
    $('.editMenu').show();
    $('.editMemorial').hide();  
});

$("#saveEdits").on('click', function() {

    var dateofBirth = ($('#dob').text());
    var deceasedName = ($('#deceasedName').text());
    var dateofDeath = ($('#dod').text());
    var aboutTitle = ($('#aboutTitle').text());
    var aboutDescription = ($('#aboutDesciption').text());  
    var firstName = ("<?php echo $first_name?>");
    var surName = ("<?php echo $surname?>");
    var hash = ("<?php echo $hash?>");
    var templateSrc = ("<?php echo $newTemplateSrc?>");


//  console.log(dateofBirth, deceasedName, dateofDeath, abouttheDeceased,firstName, surName, hash, templateSrc);

    $.post('../../../includes/editContent.php', {dateofBirth:dateofBirth,deceasedName:deceasedName,dateofDeath:dateofDeath, aboutTitle:aboutTitle,aboutDescription:aboutDescription,firstName:firstName,surName:surName,hash:hash,templateSrc:templateSrc }, function(json) {

    if(json.result === "success") {



    $('.editMenu').hide();
    $('.editMemorial').show();
    $('#dob').attr('contenteditable', 'false');
    $('#dod').attr('contenteditable', 'false'); 
    $('#aboutDesciption').attr('contenteditable', 'false');
    $('#aboutTitle').attr('contenteditable', 'false');      
    $('#deceasedName').attr('contenteditable', 'false');

    $('#dob').attr('class','#')
    $('#dod').attr('class','#')
    $('#aboutDesciption').attr('class','#')
    $('#aboutTitle').attr('class','#')      
    $('#deceasedName').attr('class','#')
    $('#uploadDeceasedImage').hide();

    }else{



            };



    });//json call
});//onclick

// editable clicks
$("#editDOB").on('click', function() {
    $('#dob').attr('contenteditable', 'true');
    $('#dod').attr('contenteditable', 'false'); 
    $('#deceasedName').attr('contenteditable', 'false');
    $('#aboutDesciption').attr('contenteditable', 'false');
    $('#aboutTitle').attr('contenteditable', 'false');

    $('#dob').attr('class','deceasedNameHighlight');
    $('#dod').attr('class','#');
    $('#deceasedName').attr('class','#');               
    $('#aboutDesciption').attr('class','#');
    $('#aboutTitle').attr('class','#');
    $('#uploadDeceasedImage').hide();               
});

$("#editName").on('click', function() {
    $('#dob').attr('contenteditable', 'false');
    $('#dod').attr('contenteditable', 'false'); 
    $('#deceasedName').attr('contenteditable', 'true');
    $('#aboutDesciption').attr('contenteditable', 'false');
    $('#aboutTitle').attr('contenteditable', 'false');

    $('#dob').attr('class','#');
    $('#dod').attr('class','#');
    $('#deceasedName').attr('class','deceasedNameHighlight');               
    $('#aboutDesciption').attr('class','#');
    $('#aboutTitle').attr('class','#');
    $('#uploadDeceasedImage').hide();       
});

$("#editDOD").on('click', function() {
    $('#dob').attr('contenteditable', 'false');
    $('#dod').attr('contenteditable', 'true');  
    $('#deceasedName').attr('contenteditable', 'false');
    $('#aboutDesciption').attr('contenteditable', 'false');
    $('#aboutTitle').attr('contenteditable', 'false');

    $('#dob').attr('class','#');
    $('#dod').attr('class','deceasedNameHighlight');
    $('#deceasedName').attr('class','#');               
    $('#aboutDesciption').attr('class','#');
    $('#aboutTitle').attr('class','#');
    $('#uploadDeceasedImage').hide();       
});

$("#editDeceasedDescription").on('click', function() {
    $('#dob').attr('contenteditable', 'false');
    $('#dod').attr('contenteditable', 'false'); 
    $('#deceasedName').attr('contenteditable', 'false');
    $('#aboutDesciption').attr('contenteditable', 'true');
    $('#aboutTitle').attr('contenteditable', 'false');

    $('#dob').attr('class','#');
    $('#dod').attr('class','#');
    $('#deceasedName').attr('class','#');               
    $('#aboutDesciption').attr('class','deceasedNameHighlight');
    $('#aboutTitle').attr('class','#'); 
    $('#uploadDeceasedImage').hide();           
});

$("#editDeceasedTitle").on('click', function() {
    $('#dob').attr('contenteditable', 'false');
    $('#dod').attr('contenteditable', 'false'); 
    $('#deceasedName').attr('contenteditable', 'false');
    $('#aboutDesciption').attr('contenteditable', 'false');
    $('#aboutTitle').attr('contenteditable', 'true');

    $('#dob').attr('class','#');
    $('#dod').attr('class','#');
    $('#deceasedName').attr('class','#');               
    $('#aboutDesciption').attr('class','#');
    $('#aboutTitle').attr('class','deceasedNameHighlight');
    $('#uploadDeceasedImage').hide();           
});

$('#editPic').on('click', function() {

    $('#uploadDeceasedImage').show();
        $('#dob').attr('contenteditable', 'false');
    $('#dod').attr('contenteditable', 'false'); 
    $('#deceasedName').attr('contenteditable', 'false');
    $('#aboutDesciption').attr('contenteditable', 'false');
    $('#aboutTitle').attr('contenteditable', 'false');

    $('#dob').attr('class','#');
    $('#dod').attr('class','#');
    $('#deceasedName').attr('class','#');               
    $('#aboutDesciption').attr('class','#');
    $('#aboutTitle').attr('class','#');

});

$('#closeDeceasedUpload').on('click', function() {  

    $('#uploadDeceasedImage').hide();
    $('#dob').attr('contenteditable', 'false');
    $('#dod').attr('contenteditable', 'false'); 
    $('#deceasedName').attr('contenteditable', 'false');
    $('#aboutDesciption').attr('contenteditable', 'false');
    $('#aboutTitle').attr('contenteditable', 'false');

    $('#dob').attr('class','#');
    $('#dod').attr('class','#');
    $('#deceasedName').attr('class','#');               
    $('#aboutDesciption').attr('class','#');
    $('#aboutTitle').attr('class','#');

    location.reload();

});

</script>

<script type="text/javascript">

        // DOM-ready event is a much option here, just using onload in demo for simplicity
        // jQuery users can use $(function()) { ...
        window.onload = function() {

            var uploader = new qq.FileUploader({

                // pass the dom node (ex. $(selector)[0] for jQuery users)
                element: document.getElementById('uploadDeceasedImageWrapper'),

                // path to server-side upload script
                // action: '/server/upload'
                action: '../../../includes/uploadDeceased_image.php',
                     params: {
                                directoryId: '<?php echo $directoryId ?>',
                                templateSrc: '<?php echo $templateFileSrc ?>'
                             },         

                allowedExtensions: ['jpg', 'png'],
                sizeLimit: 100000000,   // 100mb
                minSizeLimit: 500,

                debug: true
            }); 
        };

    </script>


   <script type="text/javascript">

   $('#saveEdits').on('click', function() {
       var html = $("html").html();
       var fileName = <?php echo $directoryId  ?>;
       console.log(html);
       $.post('../../../includes/memorialSave.php', {html:html, fileName:fileName}, function(json)  {
           $(".editMenu").hide();
           $(".editMemorial").show();
       });




   });
   </script>

我意识到我的 jquery 很啰嗦，但是 1/我是 jquery 的新手，我知道有更好的方法来编写 jquery，我只是想让东西起作用，所以不需要对此发表评论。

最佳答案

当您发布时，传递一个 URL 参数，例如scriptname.php?publish=yes。然后在 PHP 代码中，你可以这样做:

$publish = isset($_GET['publish']) ? $_GET['publish'] == 'yes' : false;
if (!$publish) {
    ?>
      <input id="editMemorial" name="button" type="button" class="editMemorial" value="Edit/Create Memorial">



      <div id="editMenu" class="editMenu" style="display:none">
        <button id="editDOB" class="editMenuNav">Edit/Add D.O.B</button>
        <button id="editPic" class="editMenuNav">Change/Add Deceased Photo</button>
        <button id="editDOD" class="editMenuNav">Edit/Add Deceased D.O.D</button>
        <button id="editDeceasedTitle" class="editMenuNav">Edit/Add About the Deceased Title</button>
        <button id="editDeceasedDescription" class="editMenuNav">Edit/Add About the Deceased</button>    
        <button id="editName" class="editMenuNav">Edit/Add Deceased Name</button>
        <button id="saveEdits" class="editMenuNav">Save Changes</button>      
      </div>  
    <?php
}

关于javascript - 使用 fopen 复制 html 页面并检查新页面以查找 session 变量，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30423349/

javascript - 使用 fopen 复制 html 页面并检查新页面以查找 session 变量

上一篇：javascript - 仅刷新单个选择/选项 HTML 对象

下一篇：javascript - 预览图像 HTML 和 JavaScript