将PHP页面嵌入到JavaScript中，同时隐藏HTML代码的方法

代码分享 • 2023-04-17

一种做法是使用iframe标签将PHP页面嵌入到HTML中。这样和上述方法类似，仍然需要使用Ajax获取PHP页面内容，并将其渲染到iframe中。例如：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Embedded PHP Page</title>
  <style>
    #frame-wrapper {
      position: relative;
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
      overflow: hidden;
    }
    #loading-mask {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: white;
      z-index: 1;
    }
    #content-frame {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border: none;
    }
  </style>
</head>
<body>
  <div id="frame-wrapper">
    <div id="loading-mask"></div>
    <iframe id="content-frame" src=""></iframe>
  </div>
  <script>
    var loadingMask = document.getElementById('loading-mask');
    var contentFrame = document.getElementById('content-frame');

    // 显示加载遮罩
    loadingMask.style.display = 'block';

    // 创建XMLHttpRequest对象
    var xhr = new XMLHttpRequest();
    // 设置响应类型为文本
    xhr.responseType = 'text';

    // 监听XHR状态变化
    xhr.onreadystatechange = function () {
      if (xhr.readyState === XMLHttpRequest.DONE) {
        if (xhr.status === 200) {
          // 成功获取到响应，将内容显示在页面上
          contentFrame.srcdoc = xhr.responseText;
        } else {
          // 响应失败，处理错误
          console.error('XHR请求失败。');
        }

        // 隐藏加载遮罩
        loadingMask.style.display = 'none';
      }
    };

    // 发送GET请求
    xhr.open('GET', '/your-php-file.php');
    xhr.send();
  </script>
</body>
</html>

文章《将PHP页面嵌入到JavaScript中，同时隐藏HTML代码的方法》
于 2023年4月17日发布在新程序，如无特别说明文章均为原创，请勿采集、转载、复制。

将PHP页面嵌入到JavaScript中，同时隐藏HTML代码的方法

相关文章

将PHP页面嵌入到JavaScript中，同时隐藏HTML代码的方法

某度使用cookie直接登录的代码

神马获取Authkey按钮提交成功方法（来自于网友）

小旋风蜘蛛池pro版本文章入库python代码（qq好友提供）

WordPress网站绑定多个域名，不进行跳转到一个域名