blocks|key|4098725|text|iframe是一个标记，您可以使用它将其他html页面调用到您的网页中。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4098726|<iframe+src="http://www.google.co.in"+name="targetframe"+allowTransparency="true"+scrolling="no"+frameborder="0"+>
++++</iframe>|code-block|syntax|javascript|4098727|entityMap^0|0|6|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

<p><code>iframe</code> is the tag which you can use for call other html pages into your web page</p>

<pre><code>&lt;iframe src="http://www.google.co.in" name="targetframe" allowTransparency="true" scrolling="no" frameborder="0" &gt;
    &lt;/iframe&gt;
</code></pre>


blocks|key|2372760|text|您可以使用jQuery|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2372761|<html>+
++<head>+
++++<script+src="jquery.js"></script>+
++++<script>+
++++$(function(){
++++++$("#divId").load("b.html");+
++++});
++++</script>+
++</head>+

++<body>+
+++++<div+id="divId"+style="display:none;"></div>
++</body>+
</html>|code-block|syntax|javascript|2372762|单击事件时，您可以将其设置为显示块。|2372763|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>You can use jQuery</p>

<pre><code>&lt;html&gt; 
  &lt;head&gt; 
    &lt;script src="jquery.js"&gt;&lt;/script&gt; 
    &lt;script&gt; 
    $(function(){
      $("#divId").load("b.html"); 
    });
    &lt;/script&gt; 
  &lt;/head&gt; 

  &lt;body&gt; 
     &lt;div id="divId" style="display:none;"&gt;&lt;/div&gt;
  &lt;/body&gt; 
&lt;/html&gt;
</code></pre>

<p>on click event you can make it display block .</p>


blocks|key|4098703|text|使用iframe在页面中加载页面。以下内容可以作为一个很好的起点。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4098704|<body>
++<div>
++++<iframe+src="page1.html"+name="targetframe"+allowTransparency="true"+scrolling="no"+frameborder="0"+>
++++</iframe>
++</div>

++<br/>

++<div>
++++<a+href="page2.html"+target="targetframe">Link+to+Page+2</a><br+/>
++++<a+href="page3.html"+target="targetframe">Link+to+Page+3</a>
++</div>
</body>|code-block|syntax|javascript|4098705|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Load a page within a page using an iframe. The following should serve as a good starting point.</p>

<pre><code>&lt;body&gt;
  &lt;div&gt;
    &lt;iframe src="page1.html" name="targetframe" allowTransparency="true" scrolling="no" frameborder="0" &gt;
    &lt;/iframe&gt;
  &lt;/div&gt;

  &lt;br/&gt;

  &lt;div&gt;
    &lt;a href="page2.html" target="targetframe"&gt;Link to Page 2&lt;/a&gt;&lt;br /&gt;
    &lt;a href="page3.html" target="targetframe"&gt;Link to Page 3&lt;/a&gt;
  &lt;/div&gt;
&lt;/body&gt;
</code></pre>


blocks|key|2241529|text|你为什么不用|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2241530|​|2241531|function+jsredir()+{
++window.location.href+=+"https://stackoverflow.com";
}|code-block|syntax|javascript|2241532|<button+onclick="jsredir()">Click+Me!</button>|2241533|2241534|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|P|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|K|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|M|$]]

<p>Why don't you use</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>function jsredir() {
  window.location.href = "https://stackoverflow.com";
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;button onclick="jsredir()"&gt;Click Me!&lt;/button&gt;</code></pre>
</div>
</div>
</p>


blocks|key|2372649|text|您要求的不是弹出窗口，而是lightbox。为此，诀窍是在后面显示一个半透明的层(称为overlay)，并在其上方显示所需的div。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2372650|希望你熟悉基本的javascript。使用以下代码。使用javascript，将display:block更改为display:none，以显示/隐藏弹出窗口。|2372651|<div+style="background-color:+rgba(150,+150,+150,+0.5);+overflow:+hidden;+position:+fixed;+left:+0px;+top:+0px;+bottom:+0px;+right:+0px;+z-index:+1000;+display:block;">
++++<div+style="background-color:+rgb(255,+255,+255);+width:+600px;+position:+static;+margin:+20px+auto;+padding:+20px+30px+0px;+top:+110px;+overflow:+hidden;+z-index:+1001;+box-shadow:+0px+3px+8px+rgba(34,+25,+25,+0.4);">
++++++++<iframe+src="otherpage.html"+width="400px"></iframe>
++++</div>
</div>|code-block|syntax|javascript|2372652|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>The thing you are asking is not popup but lightbox. For this, the trick is to display a semitransparent layer behind (called overlay) and that required div above it.</p>

<p>Hope you are familiar basic javascript. Use the following code. With javascript, change display:block to/from display:none to show/hide popup.</p>

<pre><code>&lt;div style="background-color: rgba(150, 150, 150, 0.5); overflow: hidden; position: fixed; left: 0px; top: 0px; bottom: 0px; right: 0px; z-index: 1000; display:block;"&gt;
    &lt;div style="background-color: rgb(255, 255, 255); width: 600px; position: static; margin: 20px auto; padding: 20px 30px 0px; top: 110px; overflow: hidden; z-index: 1001; box-shadow: 0px 3px 8px rgba(34, 25, 25, 0.4);"&gt;
        &lt;iframe src="otherpage.html" width="400px"&gt;&lt;/iframe&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>


blocks|key|4007578|text|<button+onclick="window.open('http://www.google.com');">Open+popup</button>|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|4007579|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>&lt;button onclick="window.open('http://www.google.com');"&gt;Open popup&lt;/button&gt;
</code></pre>


blocks|key|4007740|text|你可以试试fancybox：http://fancyapps.com/fancybox/|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|4007741|你只需要加载jquery、fancybox.css和fancybox.js：|4007742|
<script+type="text/javascript"+src="jquery.min.js"></script>


<link+rel="stylesheet"+href="jquery.fancybox.css"+type="text/css"+media="screen"+/>
<script+type="text/javascript"+src="jquery.fancybox.pack.js"></script>|code-block|syntax|javascript|4007743|并在页面中添加js代码：|4007744|$("youBtnSelector").click(function()+{
++++$.fancybox.open({
++++++++href+:+'you+html+path',
++++++++type+:+'iframe',
++++++++padding+:+5
++++});
})|4007745|这很容易做到。|4007746|entityMap|0|LINK|mutability|MUTABLE|url|http://fancyapps.com/fancybox/^0|E|U|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@$A|Z|B|10|1|11]]|C|$]]|$1|D|3|E|5|6|7|12|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|13|8|@]|9|@]|C|$I|J]]|$1|K|3|L|5|6|7|14|8|@]|9|@]|C|$]]|$1|M|3|N|5|H|7|15|8|@]|9|@]|C|$I|J]]|$1|O|3|P|5|6|7|16|8|@]|9|@]|C|$]]|$1|Q|3|-4|5|6|7|17|8|@]|9|@]|C|$]]]|R|$S|$5|T|U|V|C|$W|X]]]]

<p>you can try fancybox: <a href="http://fancyapps.com/fancybox/" rel="nofollow">http://fancyapps.com/fancybox/</a></p>

<p>you just need load jquery and fancybox.css and fancybox.js :</p>

<pre><code>&lt;!-- Add jquery --&gt;
&lt;script type="text/javascript" src="jquery.min.js"&gt;&lt;/script&gt;

&lt;!-- Add fancyBox --&gt;
&lt;link rel="stylesheet" href="jquery.fancybox.css" type="text/css" media="screen" /&gt;
&lt;script type="text/javascript" src="jquery.fancybox.pack.js"&gt;&lt;/script&gt;
</code></pre>

<p>and add  js code in your page:</p>

<pre><code>$("youBtnSelector").click(function() {
    $.fancybox.open({
        href : 'you html path',
        type : 'iframe',
        padding : 5
    });
})
</code></pre>

<p>It is easy to do</p>


blocks|key|2240128|text|怎么样|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2240129|<button+onclick="window.open('http://www.google.com','name','width=200,height=200');">Open</button>|code-block|syntax|javascript|2240130|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>How about </p>

<pre><code>&lt;button onclick="window.open('http://www.google.com','name','width=200,height=200');"&gt;Open&lt;/button&gt;
</code></pre>


blocks|key|4098775|text|如果你正在寻找页面中的弹出窗口，那就是而不是一个新的浏览器窗口，那么我会看看Javascript中的各种"LightBox“实现。|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|4098776|entityMap^0|J|3|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|K|8|@]|D|@]|E|$]]]|G|$]]

<p>If you are looking for a popup in the page, that is <strong>not</strong> a new browser window, then I would take a look at the various "LightBox" implementations in Javascript.</p>


blocks|key|2372856|text|iframe很适合它的功能，但它不是弹出窗口。我在我的一些页面上使用它，所以浏览器只需要加载新的内容，这使得加载速度更快，并节省了带宽。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2372857|通过在当前窗口顶部加载弹出窗口，这才是弹出窗口的真正目的，即在您所在的页面上显示内容，而无需卸载您所在的页面。iFrame用于在窗口中显示内容时保留主页。具有<+*editable+content+>的默认页面的旧方法有点过时了。其他人已经提供了代码，我将添加使用-onclick-+function和-popup-+wither透明与否的代码。我会选择not！|2372858|希望这能把事情说清楚。|2372859|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|H|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|I|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|J|8|@]|9|@]|A|$]]|$1|F|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|G|$]]

<p>iframe is great for what it does, but it isn't a popup. I use it on some of my pages so that the browser only has to load the new content which makes it faster loading and preserves bandwidth.</p>
<p>With a popup that loads on top of the current window, this is the true purpose of a popup, to show content over the page you're on without unloading the page you're on. iFrame is used to preserve the main page while displaying content within a window. the old method of having a default page with &lt; *editable content &gt; is somewhat outmoded.
Others have provided the code I will add that using -onclick- function with a -popup- wither transparency or not. I would go with not!</p>
<p>Hope this clears things up.</p>


<p>I need to display or load a HTML page within another HTML page on a button click.I need this in a popup with the main html page as the background.</p>

<p>Any help is appreciated.</p>


Load a HTML page within another HTML page

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

EdgeOne AI 安全实战专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

我需要在一个按钮上显示或加载另一个HTML页面中的HTML页面点击。我需要在一个弹出与主html页面作为背景这一点。任何帮助都是非常感谢的。

问在另一个HTML页中加载HTML页
EN

回答 10

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在另一个HTML页中加载HTML页EN

回答 10

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在另一个HTML页中加载HTML页
EN