在另一个 HTML 页面中加载一个 HTML 页面
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12032664/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Load a HTML page within another HTML page
提问by vijay
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.
我需要在单击按钮时在另一个 HTML 页面中显示或加载一个 HTML 页面。我需要在一个以 html 主页面为背景的弹出窗口中。
Any help is appreciated.
任何帮助表示赞赏。
回答by Carlos
iframeis the tag which you can use for call other html pages into your web page
iframe是您可以用来将其他 html 页面调用到您的网页中的标签
<iframe src="http://www.google.co.in" name="targetframe" allowTransparency="true" scrolling="no" frameborder="0" >
</iframe>
回答by DIXON THANKACHAN
You can use jQuery
你可以使用 jQuery
<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>
on click event you can make it display block .
在单击事件上，您可以使其显示块。
回答by Euric
Load a page within a page using an iframe. The following should serve as a good starting point.
使用 iframe 在页面内加载页面。以下应该作为一个很好的起点。
<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>
回答by Kapil Sharma
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.
您要问的不是弹出窗口而是灯箱。为此，诀窍是在后面显示一个半透明层（称为叠加层），并在其上方显示所需的 div。
Hope you are familiar basic javascript. Use the following code. With javascript, change display:block to/from display:none to show/hide popup.
希望你熟悉基本的javascript。使用以下代码。使用 javascript，将 display:block 更改为 display:none 以显示/隐藏弹出窗口。
<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>
回答by zsytssk
you can try fancybox: http://fancyapps.com/fancybox/
你可以试试fancybox：http: //fancyapps.com/fancybox/
you just need load jquery and fancybox.css and fancybox.js :
你只需要加载jquery和fancybox.css和fancybox.js：
<!-- Add jquery -->
<script type="text/javascript" src="jquery.min.js"></script>
<!-- Add fancyBox -->
<link rel="stylesheet" href="jquery.fancybox.css" type="text/css" media="screen" />
<script type="text/javascript" src="jquery.fancybox.pack.js"></script>
and add js code in your page:
并在您的页面中添加 js 代码：
$("youBtnSelector").click(function() {
$.fancybox.open({
href : 'you html path',
type : 'iframe',
padding : 5
});
})
It is easy to do
很容易做到
回答by ygssoni
<button onclick="window.open('http://www.google.com');">Open popup</button>
回答by Doruk Ayar
Why don't you use
你为什么不使用
function jsredir() {
window.location.href = "https://stackoverflow.com";
}<button onclick="jsredir()">Click Me!</button>回答by swemon
How about
怎么样
<button onclick="window.open('http://www.google.com','name','width=200,height=200');">Open</button>
回答by Aaron Dougherty
If you are looking for a popup in the page, that is nota new browser window, then I would take a look at the various "LightBox" implementations in Javascript.
如果您正在寻找页面中的弹出窗口，那不是一个新的浏览器窗口，那么我会看看 Javascript 中的各种“LightBox”实现。
