改变iframe的宽度和高度的问题

加载视频的时候,height设置的值会先显示然后执行js跳变到需要的高度,怎样才能没有这种跳变的过程。

 <iframe class="video_iframe" style="z-index:1;" src="http://v.qq.com/iframe/player.html?vid=uhrdeh518" llowfullscreen="" frameborder="0" onload="Javascript:setHeight(this)" width="100%" height="0" scrolling="auto"></iframe>

<script type="text/javascript">
    function setHeight() {
        var bodyw = document.body.clientWidth;
        for (var ilength = 0; ilength <= document
                .getElementsByTagName("iframe").length; ilength++) {
            document.getElementsByTagName("iframe")[ilength].height = bodyw * 9 / 16;//设定高度 
        }
    }
</script>

4个回答

你又没有使用到iframe的高度作为计算参考,而是当前页面的宽度,直接计算设置iframe高度就行
去掉iframe的onload事件,将js代码放到body结束标签之前

 <script type="text/javascript">
    function setHeight() {
        var bodyw = document.body.clientWidth;
        for (var ilength = 0; ilength <= document
                .getElementsByTagName("iframe").length; ilength++) {
            document.getElementsByTagName("iframe")[ilength].height = bodyw * 9 / 16;//设定高度
        }
    }
    setHeight();/////////////
</script>
</body>
u013206556
JJ874444051 你这个方法确实解决了问题,我这边没有学过,有没有什么好的书籍之类的推荐
大约 4 年之前 回复

先加载玩JS再加载HTML就可以了

u013206556
JJ874444051 回复当作看不见: ....不会
大约 4 年之前 回复
qq_29594393
当作看不见 回复JJ874444051: 好了,解决方案还是用JS,用回调函数,解决加载顺序的问题,不然的话,他会直接跳过去的,
大约 4 年之前 回复
u013206556
JJ874444051 回复当作看不见: 宽度和设备相同,高度要给人感觉舒适,视频下面还会加其他内容,所以总归会出现滚轮的
大约 4 年之前 回复
qq_29594393
当作看不见 回复JJ874444051: 如果屏幕宽度与高度比小于16:9,那怎麽办会出现一个滚轮,如果大于,多出来的空白怎么办,
大约 4 年之前 回复
u013206556
JJ874444051 回复当作看不见: 在iframe中加载视频,视频宽度设置100%与设备宽度相同,高度100%的时候差不多150px,想使宽度与高度比为16:9
大约 4 年之前 回复
qq_29594393
当作看不见 回复JJ874444051: 你把你想要的效果具体说明一下,然后再说明一下现在遇到的问题
大约 4 年之前 回复
u013206556
JJ874444051 回复当作看不见: css中怎么使得宽度与高度的比为16:9
大约 4 年之前 回复
u013206556
JJ874444051 回复当作看不见: 不知道应该用何种方法去控制,网上几乎全是用js控制
大约 4 年之前 回复
qq_29594393
当作看不见 你是要加载一个iframe,为什么不直接要css控制大小,而是选择加载完之后再去控制大小呢?
大约 4 年之前 回复
u013206556
JJ874444051 这段JS无论放在何处都会出现跳变的情况,是因为代码中用到了iframe的原因吗
大约 4 年之前 回复

你这种方式是比较好的的,毕竟要先加载出页面,再加载JS,用户体验好一点,而先加载JS,用户看到页面的延迟会大大加长;

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问