html iframe php,html iframe使用的实战总结分享

说在前面的话,iframe是可以做很多事情的。

例如:

a>通过iframe实现跨域;

b>使用iframe解决IE6下select遮挡不住的问题

c>通过iframe解决Ajax的前进后退问题

d>通过iframe实现异步上传。(Easyui中form组件就是用的iframe,实现表单提交时,可以提交上传域)

下面就一些问题一一论述。

1、iframe基本知识:

iframe 元素会创建包含另外一个文档的内联框架(即行内框架)。

在 HTML 4.1 Strict DTD 和 XHTML 1.0 Strict DTD 中,不支持 iframe 元素。

提示:您可以把需要的文本放置在 和 之间,这样就可以应对无法理解 iframe 的浏览器。

可选属性:

901404cb0aa9111b082736cb85b773ff.png

标准属性:

f34cc9f3565174f8b342a88cd03c4882.png

2、操作iframe:注:测试环境IE:8.0,FF:23.0.1

a>隐藏iframe表框

i>标签中设置:frameborder="0",

ii>DOM操作:

var myiframe = document.getElementById("myiframe");

myiframe.style.border="none";//FF下有效,IE下无效

myiframe.setAttribute("frameborder",0);//FF下有效,IE下无效

myiframe.frameBorder = 0;//FF下有效,IE下无效

b>动态创建iframe

var newFrame = document.createElement("iframe");

newFrame.src ="http://blog.csdn.net/cuew1987";

newFrame.frameBorder = 0;//FF、IE隐藏边框有效

newFrame.width = "400px";

newFrame.height = "400px";

newFrame.scrolling = "no";

document.body.appendChild(newFrame);

c>获取iframe

i>var obj = document.getElementById("iframeID");

获取iframe对象,可直接操作iframe标签属性,如只想改变iframe的 src 或者 border ,scrolling 等attributes

ii>var dom = frames["iframeName"];

获取iframe的DOM对象,此对象可用来操作对象,比如想操作iframe页面中的元素。

d>获取iframe中的window对象

function getIframeWindow(obj) {

//IE || w3c

return obj.contentWindow || obj.contentDocument.parentWindow;

//parentWindow 是 parent window object

}

document.getElementById取到的iframe是不能直接操作里面的document的,只能这样取:

IE:frames[id].document或obj.contentWindow.document;

FF:dom.contentDocument或obj.contentDocument;不绑定任何事件.

e>获取iframe页面高度

function getIframeHeight(obj){

var idoc = getIframeWindow(obj).document;

if(idoc.body){

return Math.max(idoc.body.scrollHeight,idoc.body.offsetHeight);

}else if(idoc.documentElement){

return Math.max(idoc.documentElement.scrollHeight,idoc.documentElement.offsetHeight);

}

}

f>父子页面互访

i>子访问父:

parent.html:

等到的信息:

son.html:

function setMsg(){

var msg = window.parent.document.getElementById("msg");

msg.innerHTML= "Hello world!!";

}

ii>父访问子:

parent.html:

等到的信息:

function setMsg(){

var obj = document.getElementById("myiframe");

var msg = getIframeWindow(obj).document.getElementById("msg");

document.getElementById("setMsg").innerHTML = msg.innerHTML;

}

son.html:

Hello world!!!

3.iframe高度自适应和跨域:实际使用iframe中,会遇到iframe高度的问题,由于被嵌套的页面长度不固定而显示出来的滚动条,不仅影响美观,还会对用户操作带来不便

a>同域下的高度自适应

parent.html:

function getIframeWindow(obj) {

return obj.contentWindow || obj.contentDocument.parentWindow;

}

function getIframeHeight(obj){

var idoc = getIframeWindow(obj).document;

if(idoc.body){

return Math.max(idoc.body.scrollHeight,idoc.body.offsetHeight);

}else if(idoc.documentElement){

return Math.max(idoc.documentElement.scrollHeight,idoc.documentElement.offsetHeight);

}

}

function setHeight(){

var myiframe = document.getElementById("myiframe");

myiframe.height = getIframeHeight(myiframe);

}

另:document.documentElement与document.body相关说明(W3C DOM2.0规范)

document.doucmentElement:

documentElement of type Element, readonly,This is a convenience attribute that allows direct access to the

child node that is the root element of the document. For HTML documents, this is the element with the tagName "HTML".

document.body:

document.body is the element that contains the content for the document. In documents with

contents, returns the element,

and in frameset documents, this returns the outermost

element.

Though body is settable, setting a new body on a document will effectively remove all the current children of the existing

element.

IE在怪异模型(Quicks Mode)下document.documentElement无法正确取到clietHeight scrollHeight等值,比如clientHeight=0。

获取scrollTop:

var sTop=Math.max(

(document.body?document.body.scrollTop:0),

(document.documentElement?document.documentElement.scrollTop:0),

(window.pageYOffset?window.pageYOffset:0)

);

b>跨域下高度自适应

页面:

index.html:(http://www.csdn.net)

son.html:

function getHeight(){

var idoc = document;

if(idoc.body){

return Math.max(idoc.body.scrollHeight,idoc.body.offsetHeight);

}else if(idoc.documentElement){

return Math.max(idoc.documentElement.scrollHeight,idoc.documentElement.offsetHeight);

}

}

window.onload = function(){

var h = getHeight();

document.getElementById("agentIframe").src="http://www.csdn.net#"+h;

}

agent.html:(http://www.csdn.net)

(function(){

var con = parent.parent.document.getElementById('frame_content');

var href = parent.parent.frames["frame_content"].frames["iframeC"].location.hash;

con.style.height = href.split("#")[1]+"px";

})();

4.iframe背景透明:

在ie6/7/8下引入iframe的时候,它的背景默认是白色,即使设置了style=”background-color:transparent;”也无效,

但是其他浏览器(firefox,chrome,opera,ie9)都正常显示,要解决这个兼容性问题,必须用到一个属性。

下面来看看现象:index.html:

style="background-color:transparent;">

结果如下图:(FF中有滚动条是因为在index.html中设置了有滚动条)

06c8775418fc75bb3dc9791bd5fc700d.png

解决:

给iframe设置属性:allowTransparency=”true” //设置为true允许透明

scrolling="yes" id="myiframe">

备注:iframe不设置此属性时,可使用iframe解决在IE6、7环境中遮住select

5.判断页面中是否有iframe:a>首先来看看window.frameElement这个属性。

返回嵌入当前window对象的元素(比如 或者 ),即为包含本页面的iframe或frame对象。如果当前window对象已经是顶层窗口,则返回null.

看看一个例子:

parent.html:

son.html:(注意frameElement用在son.html中,如果用在parent.html中,则返回null)

Hello world!!!

var iframe = window.frameElement;

if(iframe){

iframe.src = "http://blog.csdn.net/cuew1987";

}

备注:虽然该属性名为frameElement,但该属性也会返回其他类型比如 或者其他可嵌入窗口的元素.

b>兼容性如下图:

21ec613ebeb92b4fec4b1ca48ac14344.pngc>定义函数:

i>判断父页面中是否含有iframe

function hasIframe(){

return document.getElementsByTagName("iframe").length > 0;

}

ii>判断某个页面是否在iframe标签中

function innerIframe(){

var iframe = window.frameElement;

if(iframe){

return typeof iframe !== "undefined";

}

}

6、HTML5中iframe:

HTML 4.01 与 HTML 5 之间的差异在 HTML 5 中,仅仅支持 src 属性

HTML5中全局属性:

89c90360c9e6bc534200fec634c1d764.bmp

7、easyui中form组件提交(包括上传域):function submitForm(target, options) {

options = options || {};

if (options.onSubmit) {

if (options.onSubmit.call(target) == false) {

return;

}

}

var form = $(target);

if (options.url) {

form.attr("action", options.url);

}

var frameId = "easyui_frame_" + (new Date().getTime());

var frame = $("").attr(

"src",

window.ActiveXObject ? "javascript:false" : "about:blank").css(

{

position : "absolute",

top : -1000,

left : -1000

});

var t = form.attr("target"), a = form.attr("action");

form.attr("target", frameId);//在iframe中提交表单

try {

frame.appendTo("body");

frame.bind("load", cb);

form[0].submit();

} finally {

form.attr("action", a);

t ? form.attr("target", t) : form.removeAttr("target");

}

var checkCount = 10;

function cb() {

frame.unbind();

var body = $("#" + frameId).contents().find("body");

//contents()查找匹配元素内部所有的子节点(包括文本节点)。如果元素是一个iframe,则查找文档内容

var data = body.html();

if (data == "") {

if (--checkCount) {

setTimeout(cb, 100);

return;

}

return;

}

var ta = body.find(">textarea");

if (ta.length) {

data = ta.val();

} else {

var pre = body.find(">pre");

if (pre.length) {

data = pre.html();

}

}

if (options.success) {

options.success(data);

}

setTimeout(function() {

frame.unbind();

frame.remove();

}, 100);

};

};

另:form 的target属性:

a>HTML4中:

定义和用法:target 属性规定在何处打开 action URL。

兼容性:在 HTML 4.01 中,不赞成使用 form 元素的 target 属性;在 XHTML 1.0 Strict DTD 中,不支持该属性。

属性值:

_blank 新窗口中打开

_self 默认,在相同的框架中打开

_parent 父框架中打开

_top 整个窗口中打开

framename 指定的frame name属性值的框架中打开

b>HTML5中:

HTML 4.01 与 HTML 5 之间的差异

在 HTML5 中 target 属性不再是被废弃的属性。不再支持 frame 和 frameset。

现在,parent, top 和 framename 值大多用于 iframe。

8、网上问题收集:

a>window.frameElement在chrome下undefined?

问题描述:

今天在重新编写我的日历组件的时候,由于用到使用iframe自定义属性传值,

将父页面的值写在iframe 自定义属性上,然后在iframe页面中使用 window.frameElement.getAttribute() 获取,

奇怪的是之前编写的日历控件代码一直都这样写,没有发生过错误,但是今天在chrome里面 window.frameElement 竟然是 undefined,

在firefox 甚至IE6下都没有问题,后来百度没有答案, 再google 也,没有答案。

解决:

最后自己根据以往经验想到或许是本地调试权限问题,于是打开apache使用域名的形式访问,果然可以了,呵呵!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/428295.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

环形队列出队的元素怎么输出出来_队列的知识讲解与基本实现(数据结构)

引言中午在食堂打饭,真是一个令人头疼的事情,去食堂的路上也总是步伐匆匆,为什么啊,这还用说,迟一点去,你就会知道什么叫做人山人海了,在食堂排队的时候,相比较学生来说,…

$compile 手动编译

angularjs里比较重要但又很少手动调用的要属$compile服务了,通常在写组件或指令时,都是angularjs自动编译完成的,但有时我们可能需要手动编译,比如封装一个table组件,根据参数实现自定义渲染,增加一列复选框…

计算机excel知识点一级,2012年计算机一级考试高分必看知识点:EXCEL

EXCEL1、 插入新工作表,更改工作表名单击“插入/工作表”,即可插入新工作表,工作表名为sheet编号指向某张工作表处,双击鼠标左键,输入新工作表名即可修改工作表名2、 设置某列数据保留小数位数为2位选择该列所有有效数据后&#x…

c++ 不插入重复元素但也不排序_【每日一题】125. 对链表进行插入排序

关注我们获取更多计算机考研信息对链表进行插入,插入排序算法:插入排序是迭代的,每次只移动一个元素,直到所有元素可以形成一个有序的输出列表。每次迭代中,插入排序只从输入数据中移除一个待排序的元素,找…

HA架构

HA架构是个什么东西? 阅读文章:浅谈web应用的负载均衡、集群、高可用(HA)解决方案转载于:https://www.cnblogs.com/Tpf386/p/8297744.html

怎么检查计算机网络是连接,怎么检测网络打印机是否与电脑连接成功【检测方法】...

想必不少宝宝和以前的小编一样,在用网络打印机的时候,有时候能打印,有时候却打印不了。那么如何 检测网络打印机是否与电脑连接成功?跟随小编往下看。系统反反复复告知“无法打印”,让工作本已繁忙的小修近乎奔溃! 那么&#xff…

python画菱形的代码_python绘制菱形

广告关闭 腾讯云11.11云上盛惠 ,精选热门产品助力上云,云服务器首年88元起,买的越多返的越多,最高返5000元!首先,将数据读入到python中,并绘制出生率和死亡率数据的散点图,代码如下&…

正则表达式小应用之对xml格式字符串每个字段加双引号

通过Python对接口进行自动化后需要把xml格式的报文放到LoadRunner上进行压力测试,在pyCharm控制台打印出报文后,把报文放到LoadRunner中做了格式调整后,每个字段需要添加双引号。手动给每一行的字段添加双引号太费时费力,利用UE也…

python爬虫数据可视化_python 爬虫与数据可视化--python基础知识

摘要:偶然机会接触到python语音,感觉语法简单、功能强大,刚好朋友分享了一个网课《python 爬虫与数据可视化》,于是在工作与闲暇时间学习起来,并做如下课程笔记整理,整体大概分为4个部分(1.pyth…

计算机实物知识需求市场调研,能力本位计算机维护论文

能力本位计算机维护论文1课程教学现状对于计算机专业学生来说,学会组装计算机系统,分析和解决计算机常见故障是计算机专业学生必须掌握的一项技能,学好本课程对将来就业有很大的帮助。然而,随着计算机技术的快速发展,本…

重写、重构、重载区别

目的 最近的经历,被问到重构、重写、重载,今天在网上查资料学习。总结如下,希望对你有帮助。 重构、重写、重载 重构:通过调整程序代码改善软件的质量、性能,使其程序的设计模式和架构更趋合理。提高软件的扩展性和维护…

python爬取bilibili弹幕_python爬虫:bilibili弹幕爬取+词云生成

如果你懒得看下边的文字,我录了一个完整的教学视频在b站上。 我的B站教学:https://www.bilibili.com/video/av75377135?p2 工作原理 b站是提供弹幕接口的,所以我们的整体操作进行如下: 1.到B站获取cid2.将cid与网站固定格式进行链…

c json输出html标签,Json编码HTML字符串

我目前正在从PowerShell脚本生成JSON文件,但它正在输出Unicode而不是特殊字符,如这是我得到的输出:[{"Id": "187303","LinkText": "\u003cb style color:#d11717;\u0027\u003eAnnual General Meeting (ME…

access vba 常量数组赋值_聊聊 VBA 数组的那些坑

为什么使用数组?1. 缩减工作薄文件大小,提高运行效率一般而言只是使用 Excel 的内置工作表函数,在运算方面还是很高效的,但有时因为一个单元格牵扯的计算太多,比如调用多单元格数据,对结果文本进行部分替换…

extern、static

1. 基本解释:extern可以置于变量或者函数前,以标示变量或者函数的定义在别的文件中,提示编译器遇到此变量和函数时在其他模块中寻找其定义。此外extern也可用来进行链接指定。 也就是说extern有两个作用,第一个,当它与"C&quo…

python如何处理数据_python数据处理之如何选取csv文件中某几行的数据

前言 有些人看到这个问题觉得不是问题,是嘛,不就是df.col[]函数嘛,其实忽略了一个重点,那就是我们要省去把csv文件全部读取这个过程,因为如果在面临亿万级别的大规模数据,得到的结果就是boom,bo…

HTML文件可通过www进行传输,使用 zssh 进行 Zmodem 文件传输

Zmodem 最早是设计用来在串行连接(uart、rs232、rs485)上进行数据传输的,比如,在 minicom 下,我们就可以方便的用 Zmodem (说 sz 、rz 可能大家更熟悉)传输文件。只不过串口本身传输速度不快,文件大的话会让人有点崩溃。没有彻底把…

Linux下使用popen()执行shell命令

转载于&#xff1a;https://www.cnblogs.com/caosiyang/archive/2012/06/25/2560976.html 简单说一下popen()函数 函数定义 #include <stdio.h>FILE * popen(const char *command , const char *type ); int pclose(FILE *stream); 函数说明 popen()函数通过创建一个管道…

centos7安装python3.7.4_Centos7升级Python3.7.4

和大家技术分享一下当我们安装完成Centos7后&#xff0c;默认系统Python的版本为2.7.5。我们希望将Python升级到最新版本。 1、安装依赖项 yum install -y openssl-devel openssl-static zlib-devel lzma tk-devel xz-devel bzip2-devel ncurses-devel gdbm-devel readline-dev…

中年人可以学计算机吗,中老年人学计算机与上网的操作系统是windows xp还是window7...

中老年人学计算机与上网的操作系统是windows xp还是window7《中老年人学电脑与上网》想买这本书给爸妈学&#xff0c;但是不知道操作系统什么&#xff0c;简介上也没有写&#xff0c;有没有知道的告诉我是用什么系统教的。谢谢 我是想买这本书&#xff0c;请看过这本书的人告诉…