iframe自适应与视频播放代码实现

需积分: 10 7 浏览量更新于2024-12-04 收藏 687KB DOC 举报

"本文主要探讨了在Flytech的艾塞德项目中，如何处理前端与后端不使用母版页而是使用iframe的情况，以及首页视频的播放代码实现。" 在Flytech的艾塞德项目中，为了使iframe能够随着页面大小动态调整，我们可以采用JavaScript来实现这一功能。关键在于监控iframe内容的大小变化，并将这些变化应用到iframe本身。具体做法如下： 1. 首先，在iframe指向的页面中添加以下JavaScript代码： ```javascript function f_frameStyleResize(targObj) { var targWin = targObj.parent.document.all[targObj.name]; if (targWin != null) { var HeightValue = targObj.document.body.scrollHeight; targWin.style.pixelHeight = HeightValue; } } function f_iframeResize() { f_frameStyleResize(self); } ``` 这段代码定义了两个函数：`f_frameStyleResize`用于计算并设置iframe的高度，而`f_iframeResize`则是在页面加载完成后调用前者，确保iframe的高度能够适应其内容。 2. 然后，确保在页面的`<head>`或`<body>`标签内加入以下代码，使得窗口加载时自动执行`f_iframeResize`函数： ```html window.onload = f_iframeResize; ``` 这样，每当iframe中的内容发生变化，它的高度就会自动调整以适应新内容的高度。除了iframe的调整，文件还提到了首页视频的播放代码。使用的是旧式的`<object>`标签来嵌入Windows Media Player播放器。以下是该代码示例： ```html <object id="player" width="522" classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6" style="height:311px" viewastext> <param name="Balance" value="1"/> <param name="enabled" value="-1"/> <param name="EnableContextMenu" value="-1"/>  <param name="url" value="影片路径"/>  </object> ``` 这里的`<param>`标签用于设定播放器的各种属性，如平衡、是否启用右键菜单、播放次数等。`<param name="url" value="影片路径">`是设置视频源的路径，你需要将其替换为实际的视频文件路径。总结起来，这个项目中涉及到的关键技术点包括： 1. 使用JavaScript动态调整iframe的高度，以适应内容的变化。 2. 使用`<object>`标签和相关参数设置来嵌入和控制Windows Media Player播放视频。这些技术对于构建一个响应式且包含多媒体元素的Web页面至关重要，特别是在不使用母版页的情况下，需要通过编程手段确保用户体验的流畅和舒适。

艾塞德项目注意点

1、前台和后台不使用母版页，使用 iframe，那么怎么设置 iframe 随着页面大小而改变？

在 iframe 指定的页面中添加以下 js 代码

function f_frameStyleResize(targObj){

var targWin=targObj.parent.document.all[targObj.name];

if(targWin!=null){

var HeightValue=targObj.document.body.scrollHeight;

targWin.style.pixelHeight=HeightValue;

}

function f_iframeResize(){

f_frameStyleResize(self);

}

window.onload=f_iframeResize;

2、首页播放视频代码

播放器代码：

00C04F79FAA6" style="height: 311px" viewastext>

下载后可阅读完整内容，剩余7页未读，立即下载

moon_simple

粉丝: 1
资源: 4

iframe自适应与视频播放代码实现

飞懋flytech触摸屏驱动XP

项目（flytech）后台图片

项目(Flytech)的静态页面

飞懋触摸屏驱动程序v14.3.rar

2024年欧洲患者信息娱乐终端市场主要企业市场占有率及排名.docx

2024年俄罗斯患者信息娱乐终端市场机会及渠道调研报告Sample.pdf

电气工程及其自动化 (2).docx

vs-Community2017

数据科学与大数据技术 (10).docx

高跟鞋检测24-YOLOv8数据集合集.rar

最新资源