佛山seo培训机构,长沙网站seo公司,怎么弄一个自己的链接,网站开发语言都有什么说在前面的话#xff0c;iframe是可以做很多事情的。例如#xff1a;a通过iframe实现跨域;b使用iframe解决IE6下select遮挡不住的问题c通过iframe解决Ajax的前进后退问题d通过iframe实现异步上传。(Easyui中form组件就是用的iframe#xff0c;实现表单提交时…说在前面的话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 的浏览器。可选属性标准属性2、操作iframe注测试环境IE8.0FF23.0.1a隐藏iframe表框i标签中设置frameborder0,iiDOM操作var myiframe document.getElementById(myiframe);myiframe.style.bordernone;//FF下有效IE下无效myiframe.setAttribute(frameborder,0);//FF下有效IE下无效myiframe.frameBorder 0;//FF下有效IE下无效b动态创建iframevar 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获取iframeivar obj document.getElementById(iframeID);获取iframe对象可直接操作iframe标签属性,如只想改变iframe的 src 或者 border scrolling 等attributesiivar dom frames[iframeName];获取iframe的DOM对象此对象可用来操作对象比如想操作iframe页面中的元素。d获取iframe中的window对象function getIframeWindow(obj) {//IE || w3creturn 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 thechild 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等值比如clientHeight0。获取scrollTop:var sTopMath.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).srchttp://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:stylebackground-color:transparent;结果如下图(FF中有滚动条是因为在index.html中设置了有滚动条)解决给iframe设置属性allowTransparency”true” //设置为true允许透明scrollingyes idmyiframe备注iframe不设置此属性时可使用iframe解决在IE6、7环境中遮住select5.判断页面中是否有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兼容性如下图c定义函数i判断父页面中是否含有iframefunction hasIframe(){return document.getElementsByTagName(iframe).length 0;}ii判断某个页面是否在iframe标签中function innerIframe(){var iframe window.frameElement;if(iframe){return typeof iframe ! undefined;}}6、HTML5中iframeHTML 4.01 与 HTML 5 之间的差异在 HTML 5 中仅仅支持 src 属性HTML5中全局属性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属性aHTML4中定义和用法target 属性规定在何处打开 action URL。兼容性在 HTML 4.01 中不赞成使用 form 元素的 target 属性在 XHTML 1.0 Strict DTD 中不支持该属性。属性值_blank 新窗口中打开_self 默认在相同的框架中打开_parent 父框架中打开_top 整个窗口中打开framename 指定的frame name属性值的框架中打开bHTML5中HTML 4.01 与 HTML 5 之间的差异在 HTML5 中 target 属性不再是被废弃的属性。不再支持 frame 和 frameset。现在parent, top 和 framename 值大多用于 iframe。8、网上问题收集awindow.frameElement在chrome下undefined?问题描述今天在重新编写我的日历组件的时候由于用到使用iframe自定义属性传值将父页面的值写在iframe 自定义属性上然后在iframe页面中使用 window.frameElement.getAttribute() 获取奇怪的是之前编写的日历控件代码一直都这样写没有发生过错误但是今天在chrome里面 window.frameElement 竟然是 undefined在firefox 甚至IE6下都没有问题后来百度没有答案 再google 也没有答案。解决最后自己根据以往经验想到或许是本地调试权限问题于是打开apache使用域名的形式访问果然可以了呵呵
