操作iframe的一些方法
2024-08-28 20:14:43
//父页面操作iframe里的内容
oInput.onclick=function(){
var oBox = oIframe.contentWindow.document.getElementById("box");//获取window对象
var oDocument = oIframe.contentDocument.getElementById("box");//获取document对象
}
//iframe操作父页面里的内容
window.parent.document.getElementById('box');
window.top.document.getElementById('box');
window.onload=function(){
//添加iframe;
var oIframe = document.createElement('iframe');
oIframe.src='iframe1.html';
document.body.appendChild(iframe);
}
oIframe.onload=function(){
// do something
console.log(11);
}
//ie下绑定事件
oIframe.attachEvent("onload",function(){
console.log(111);
})
//防止钓鱼网站
if(window.top!==window.self){
window.top.href = window.location.href;
}
//撑高iframe的高度
function changeHeight(){
oIframe.height = oIframe.contentWindow.document.body.offsetHeight;//jquery不行的话 用js试下document.getElementById('default').contentWindow.document.body.offsetHeight
}
changeHeight();
//iframe里操作父页面的高度
window.parent.document.documentElement.scrollHeight || window.parent.document.body.scrollHeight;
//CSS如何让iframe实现自适应高度的效果
<
div
class
=
"resp-container"
>
<
iframe
class
=
"resp-iframe"
src
=
"https://www.youtube.com/embed/dQw4w9WgXcQ"
gesture
=
"media"
allow
=
"encrypted-media"
allowfullscreen></
iframe
>
</
div
>
.resp-container {
position
:
relative
;
overflow
:
hidden
;
padding-top
:
56.25%
;
}
.resp-iframe {
position
:
absolute
;
top
:
0
;
left
:
0
;
width
:
100%
;
height
:
100%
;
border
:
0
;
}
position: absolute;这将为iframe提供相对于包装器的位置,并将其放置在包装器的填充上。
top: 0并left: 0用于将iframe定位在容器的中心。
width: 100%并且height: 100%使IFRAME采取所有包装的空间。
完成后,你应该得到一个响应的iframe。
网上摘抄的一些笔记,如有错误,麻烦指正~
最新文章
- 简单的ViewPager了解Scroller类
- [pyqt4]mark
- noip2013 火柴排队
- AngularJS入门
- 使用python来调试串口
- phpcms学习总结
- [Unity菜鸟] Unity发布web后,从HTML调用本地文件
- hdu3999The order of a Tree (二叉平衡树(AVL))
- [基础]RHEL6下LINUX服务器批量部署
- C++中string中的erase函数怎么使用
- WEB版一次选择多个图片进行批量上传(WebUploader)的解决方案
- 【算法】螺旋方阵 上交OJ1021
- gnocchi resource批量删除
- vue.js学习系列-第二篇
- 解决:MVC对象转json包含\r \n
- js 第二课
- 图->;连通性->;关节点和重连通分量
- 用github搭建网站
- 【推荐】ImageProcessor.Web,再也不用自己生成缩略图了
- 670. Maximum Swap