在加载实际的 html 文件之前加载另一个 html 文件作为弹出窗口

Posted 2023-05-09

技术标签:

【中文标题】在加载实际的 html 文件之前加载另一个 html 文件作为弹出窗口【英文标题】：load another html file as a popup before loading the actual html file 【发布时间】：2018-11-19 03:19:39 【问题描述】：

如果我有以下 html 文件，例如 index.html

<html>
<body>

<div>
<p>Sample html</p>
</div>
</body>
</html>

并考虑我有另一个名为 example.html 的 html 页面在加载 index.html 之前，我需要将此 example.html 作为弹出窗口加载。怎么可能

【问题讨论】：

你将使用js来控制你想先显示哪个表单。然后当用户点击确定或关闭表单时，显示第二个。你能解释一下吗是在同一个窗口的iframe中打开还是在popup的iframe中打开？同一窗口。当我们访问某些网站时，我们会看到一些带有优惠的图像，对吗？就像在同一个窗口中一样我想加载html文件的图像（只有在关闭此框后，用户才能查看真实页面） 【参考方案1】：

只需在 index.html 文件中编写以下代码

<!DOCTYPE html>
<html>
<head>
    <title>Index</title>
</head>
<body onload="myFunction()">
    index Page
    <script>
        function myFunction()
            var myWindow = window.open("example.html", "", "width=700,height=500");
        
    </script>
</body>
</html>

并在同一目录中创建另一个名为 example.html 的 html 文件。每当打开 index.html 页面时，example.html 文件都会在弹出窗口中自行打开

【讨论】：

你的答案就差不多了。问题是我不想在另一个窗口中显示页面。我需要像图像或其他东西一样在同一个窗口中显示它（没有边框的纯 html）【参考方案2】：

最好将您的 example.html 代码放在 div 标记中以实现响应性和简洁性，而不是 iframe，但这里我使用 iframe 来解决您的问题。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Dialog - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
  $( function() 
    $( "#dialog" ).dialog();
   );
  </script>
</head>
<body>

<div id="dialog" title="Basic dialog">
 <iframe src='example.html' width='600' height='350'> </iframe>
</div>


</body>
</html>

参考链接：http://jqueryui.com/dialog/

【讨论】：

它不会作为弹出窗口出现，它只是显示在我的真实页面上方你要不要弹窗？

以上是关于在加载实际的 html 文件之前加载另一个 html 文件作为弹出窗口的主要内容，如果未能解决你的问题，请参考以下文章

jQuery 将 div 加载到另一个没有 .html() 方法的