在html页面中引入另一个html页面的标签?
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了在html页面中引入另一个html页面的标签?相关的知识，希望对你有一定的参考价值。
我做了两个html页面，需要在一个页面中引入另一个页面，页面都是用的<div>标签弄的
在html页面中引入另一个html页面的标签
1、用iframe标签
<iframe SRC="xxxx.html" ></iframe>
[代码] <IFRAME NAME="content_frame" width=100% height=30 marginwidth=0 marginheight=0 SRC="import.htm" ></IFRAME>
2、用object标签
<object data="xxxx.htm"></object>
[代码] <object style="border:0px" type="text/x-scriptlet" data="import.htm" width=100% height=30></object>
扩展资料：
1、iframe标签定义及使用说明：
<iframe> 标签规定一个内联框架。
一个内联框架被用来在当前 HTML 文档中嵌入另一个文档。
2、object标签定义和用法
定义一个嵌入的对象。请使用此元素向您的 XHTML 页面添加多媒体。此元素允许您规定插入 HTML 文档中的对象的数据和参数，以及可用来显示和操作数据的代码。
<object> 标签用于包含对象，比如图像、音频、视频、Java applets、ActiveX、PDF 以及 Flash。
object 的初衷是取代 img 和 applet 元素。不过由于漏洞以及缺乏浏览器支持，这一点并未实现。
参考资料来源：百度百科-HTML
参考资料来源：百度百科-iframe
参考技术A 在html页面中引入另一个html页面的标签1：用iframe标签
<iframe SRC="xxxx.html" ></iframe> 2：用object标签
<object data="xxxx.htm"></object>
3：Behavior的download方式 这个有点烦 我不说了
假如动态页面可以用 <!--#include file="文件名称"-->
假如你想学asp连接数据库，读取数据库里的内容等知识 可以来我空间看看
在html文件引入其它html文件的几种方式 简介：
1.IFrame引入，瞧一下下面的代码
[代码] <IFRAME NAME="content_frame" width=100% height=30 marginwidth=0 marginheight=0 SRC="import.htm" ></IFRAME>
2.<object>方法
[代码] <object style="border:0px" type="text/x-scriptlet" data="import.htm" width=100% height=30></object>
3.Behavior的download方法
[代码]
<span id=showImport></span>
<IE:Download ID="oDownload" STYLE="behavior:url(#default#download)" /> <script>
function onDownloadDone(downDate) showImport.innerHTML=downDate
oDownload.startDownload('import.htm',onDownloadDone) </script>
纯静态页面只能用上边三种了
如果是动态页面就好办了，可以用include
<!--#include file="test1.asp"-->
如果服务器支持ssi可以用ssi
<!--#include virtual="文件名称"-->
<!--#include file="文件名称"-->
1.frame，frameset都用name = 'xxx'来提供引用。
2.父引用子frame window.frames['frameName']
3.子引用父frameset window.parent
4.兄弟相互引用 window.parent.frames['frameName']
5.引用顶层frameset window.top
IE,FF
window.parent.window.document.getElementById("main")... 参考技术B 1：用iframe标签
<iframe SRC="xxxx.html" ></iframe>
2：用object标签
<object data="xxxx.htm"></object>
3：Behavior的download方式 这个有点烦 我不说了
假如动态页面可以用
<!--#include file="文件名称"-->
假如你想学asp连接数据库，读取数据库里的内容等知识 可以来我空间看看
http://hi.baidu.com/albbliuyibing
Html画布视频流
【中文标题】Html画布视频流【英文标题】：Html canvas video streaming 【发布时间】：2021-11-18 10:33:28 【问题描述】：我有这段代码，它在视频标签中播放我的相机视图，然后在同一页面的画布元素中播放，页面有 2 个正方形，一个用于视频标签（播放相机视图），另一个用于画布（播放视频标签的相同视频）。我如何编辑我的代码以使视频在另一个页面的画布中播放以让我的用户实时观看它，如果有一种方法可以让用户在同一页面而不是另一个页面上观看它并且只看到画布，那就是也接受了。
这是我的 html 文件：
<html>
<head>
<meta charset="UTF-8">
<title>With canvas</title>
</head>
<body>
<div class="booth">
<video id="video" autoplay></video>
<canvas id="canvas" style="border: 1px solid black;"></canvas>
</div>
<script src="video.js"></script>
</body>
</html>
这是我的 js 文件：
(function()
var canvas= document.getElementById('canvas'),
context = canvas.getContext('2d'),
video = document.getElementById('video'),
vendorUrl = window.URL || window.webkitURL;
navigator.getMedia = navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.msGetUserMedia;
navigator.getMedia (
video: true,
audio: false
, function(stream)
//video.src = vendorUrl.createObjectURL(stream);
if ('srcObject' in video)
video.srcObject = stream;
else
video.src = vendorUrl.createObjectURL(stream);
video.play();
, function(error)
// An error occured
//error.code
);
video.addEventListener('play', function()
setInterval(() =>
draw(this, context, 400, 300);
, 100);
, false );
function draw(video, context, width, height)
context.drawImage(video, 0, 0, width, height);
) ();
【问题讨论】：
如果您想在另一个页面上播放，您可以将相机数据作为数组缓冲区获取，但是为什么您想在可以在视频标签中播放时在画布中播放？ 用户可以现场观看吗？ @阿米尔·拉赫曼 您将获得块中的缓冲区，无论如何您都必须将其发送给其他用户，然后它可以像现场直播一样播放等待我有此类实验的代码我将在答案中发布它等待分钟 好的，@Amir Rahman 【参考方案1】：使用MediaRecorder 以块的形式获取实时数据，作为来自摄像机的媒体记录器记录，并提供可以通过另一端用户发送的块
然后使用mediasource 在用户的另一侧附加块以附加它并在收到新块时实时播放
我知道这是一件复杂的事情，但相信我，当我在做这个实验时，我花了很多时间来理解我相信你会从我下面的实验代码中得到一些好处
这是一个有效的demo
var mediasource = new MediaSource(),video = document.querySelector("video"),
mime = 'video/webm;codecs=vp9,opus'
video.src = URL.createObjectURL(mediasource)
mediasource.addEventListener("sourceopen",function(_)
var source = mediasource.addSourceBuffer(mime)
navigator.mediaDevices.getUserMedia(video: true,audio: true).then(stream=>
var recorder = new MediaRecorder(stream,mimeType:mime)
recorder.ondataavailable = d =>
// creating chunks of 5 seconds of video continiously
var r = new Response(d.data).arrayBuffer() // convert blob to arraybuffer
r.then(arraybuffer=>
source.appendBuffer(arraybuffer)
)
recorder.start(5000)
)
)
<video class="video" controls autoplay></video>收集实时数据并播放的分离版本 demo
// gathering camera data to liveData array
var vid = document.querySelector(".video"),
mime = 'video/webm;codecs=vp9,opus',
liveData = []
navigator.mediaDevices.getUserMedia(video:true,audio:true).then(stream=>
var recorder = new MediaRecorder(stream,mimeType:mime)
recorder.ondataavailable = d =>
console.log("capturing")
new Response(d.data).arrayBuffer().then(eachChunk=>
// recording in chunks here and saving it to liveData array
liveData.push(eachChunk)
)
recorder.start(5000)
)
//--------------------------------------------------------------------------------
// playing from liveData in video
var ms = new MediaSource()
vid.src =URL.createObjectURL(ms)
ms.onsourceopen = function()
var source = ms.addSourceBuffer(mime),chunkIndex = 0
setInterval(function()
if(liveData.length > 0)
var currentChunk = liveData[chunkIndex]
source.appendBuffer(currentChunk)
console.log("playing")
chunkIndex++
,5000)
【讨论】：
谢谢大佬，但我要如何让用户观看呢？我想让用户像在 Facebook 现场直播一样观看它，但更简单。 这段代码每次为您提供 5 秒的录制时间，可以使用MediaSource 在视频播放器中播放，因为您无法手动附加块，这就是为什么一旦您将 MediaSource 连接到视频播放器，MediaSource 就在这里然后在MediaSource 中追加块，它将追加并实时播放
对不起兄弟，你能用代码解释一下吗？我以前没有使用过，所以对我来说不清楚，请帮助我。 @阿米尔·拉赫曼
好的，首先我将只向您展示记录器，我知道 mediasource API 不是那么用户友好，但就是这样
你救了我的命！以上是关于在html页面中引入另一个html页面的标签?的主要内容，如果未能解决你的问题，请参考以下文章