html 嵌入其他网页

1
<iframe src="https://www.cnblogs.com/caihongmin/p/17762040.html" width="100%" height="600"></iframe>
1
window.frames['iframe'].postMessage({type: 'updateStyle', cssText: 'body {background-color: red;}'}, "http://www.childwebsite.com");

https://i.meituan.com/awp/h5/lvyou/deal/group/index.html?dealId=870045539

https://m.ctrip.com/webapp/ticket/vendorshop?vendorid=51750&isHideNavBar=YES

https://m.ctrip.com/webapp/tnt/list?pagetype=vendor&id=51750&name=%E9%83%B4%E5%B7%9E%E4%B9%90%E6%99%AF%E5%9B%BD%E9%99%85%E6%97%85%E8%A1%8C%E7%A4%BE%E6%9C%89%E9%99%90%E5%85%AC%E5%8F%B8&from=ttd

https://m.ctrip.com/webapp/tnt/list?pagetype=vendor&id=51750&name=郴州乐景国际旅行社有限公司&from=ttd

window.frames[‘iframe’].postMessage({type: ‘updateStyle’, cssText: ‘body {background-color: red;}’}, “http://www.childwebsite.com“); 

1
2
var targetWindow = window.open('http://localhost:8081/', '_self')
 targetWindow.name = 'demo'

var targetWindow = window.open(‘http://localhost:8081/‘, ‘_self’)
targetWindow.name = ‘demo’

1
2
var targetWindow = window.open(&#39;<a href='http://localhost:8081/' target='_blank' class='url'>http://localhost:8081/</a>&#39;, &#39;_self&#39;)
 targetWindow.name = &#39;demo&#39;
1
window.frames['iframe'].postMessage({type: 'updateStyle', cssText: 'body {background-color: red;}'}, "http://www.childwebsite.com");

window.frames[‘iframe’].postMessage({type: ‘updateStyle’, cssText: ‘body {background-color: red;}’}, “http://www.childwebsite.com“);

嵌入网页示例

html 嵌入其他网页

要在HTML中嵌入其他网页，可以使用<iframe>标签。以下是一个简单的例子：

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>嵌入网页示例</title>
</head>
<body>
    <iframe src="https://example.com" width="600" height="400">
        抱歉，您的浏览器不支持内嵌框架(iframe)。
    </iframe>
</body>
</html>

在这个例子中，<iframe>标签的src属性指定了想要嵌入的网页的URL。width和height属性用来设置iframe的尺寸。如果浏览器不支持iframe，用户将看到一条错误消息。

如何将一个HTML页面嵌套在另一个页面中

一 在原页面嵌入其他页面

1、使用iframe框架

客户端页面嵌套可以使用iframe的方法，弊端是必须事先想好被嵌套的页面在首页中要占多大的位置。

如果被嵌套页面太大，超过事先定义的宽度或高度，则首页会出现滚动条。这也许正是你所需要的，

但也许会完全破坏主页的设计。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
 < iframe >------ < / iframe >

<iframe  src="要放在框架里面的网址或文件" height="" width="">  </ifrmae>
                             

     例： <iframe src="text.asp" height="200" width="600">   

                       <a href="text.asp">

                          你的浏览器不支持iframe页面嵌套，请点击这里访问页面内容。

                       </a>

              </ifrmae >

              

             可加属性    scrolling="No"     意为滚动条不随内容改变而出现      -- 多余的内容会被自动隐藏！

                             frameborder="0"   嵌套页面边框

                             leftmargin="0"      左边距

                             topmargin="0"      上边距

                             onscroll="true"      当元素滚动条被滚动时执行脚本 ,在HTML 5 中定义了该元素

插入，是因为老版本的浏览器和搜索引擎不支持iframe，虽然现在已经

很少有人还会使用Netscape 4这样老的浏览器了，但是几乎所有人都会使用象Google这样的搜索引擎。

在iframe里面加上超级链接可以帮助搜索引擎找到网页的内容。

2、SSI (Server Side Include)

SSI是一种简单的动态网页制作技术，但是有些服务器要求网页文件扩展名为.shtml才能识别文件中SSI命令。所以如果你的SSI命令看起来不工作，先别放弃，试着把文件扩展名改为.shtml，也许会成功。如果知道自己的服务器是否支持SSI，请看另一篇文章。

使用SSI一个局限性是页面一定要放在网页服务器上才能看到效果，在本地是不好调试的。当然，如果非要在本地调试，就本地装一个Apache服务器好了。

比如你想在每个网页的底部加上同样的版权信息，像

© 2009 程序员实验室 版权所有

可以把这行信息放到一个叫做footer.html的文件里，footer.html的内容为：

© 程序员实验室 版权所有
;

这样同一路径下的其他页面文件要包含footer.html的SSI命令是：

​ <!- #include virtual=”footer.html” ->（常用）

或者

<!- #include file="footer.html" ->

这两者的几乎是一样的，不同之处在于include virtual后面取的是一个URL形式的路径，甚至还可以执行一个CGI程序并包含其输出结果，如果你的服务器支持CGI的话。而include file后面取的是一个文件系统路径，并且不能执行CGI程序。两者都可以接受相对路径，所以对上面这个简单例子，两者的效果是一样的。如果你不知道URL路径与文件系统路径两者的区别的话，就用include virtual

3、ASP和ASP.Net

如果你使用的是老式的ASP，则语法是与上面SSI一样的，不需要任何修改，只要把命令所在文件的扩展名改为.asp即可。

对于ASP.NET，也是类似，不同之处在于，因为SSI命令是在ASP命令运行之前被首先编译，所以文件名中不能够使用ASP.NET的变量。如果一定要用的话，就用ASP.NET的命令来做文件嵌套吧。

比如：

1
2
3
4
5
<%

          Response.WriteFile ("footer.html")

%>

更多关于怎样在ASP.NET中实现动态文件嵌套，请参考微软的这篇文章。

4、PHP

如果你的服务器支持PHP的话，用PHP引用footer.html文件的写法如下：

1
<?php include("footer.html"); ?>

这句命令所在的文件扩展名必须被为.php。

除了引用本服务器上的文件，PHP的include命令还可以用来引用其它网站上的html文件，比如：

1
<?php include(http://www.prglab.com/examples/footer.html); ?>

当然你要得到其它网站的允许才能引用别人的文件。

**5、JSP （Java Server Page)
**

JSP文件需要在基于Java的服务器上运行，比如Apache Tomcat。JSP包含文件的语法是：

1
<%@ include file="footer.html" %>
Markdown
#Markdown #Typora
html 嵌入其他网页
http://aiyoja.github.io/20240505/
作者
弶森
发布于
2024年4月28日
许可协议