- 浏览: 49639 次
- 性别:
- 来自: 北京
最新评论
-
hanxiao84322:
强大啊,虽然没有完全看明白。
YUI 3.0应用初探 -
osacar:
不行啊。没效果!在Opera下测试
IE也不行。
JS iframe跨域自适应内容高度 -
xxzjzb1:
中秋送礼,首选书画、艺术品交易平台爱艺购!
JS将数字转换成三位逗号分隔的样式 -
mozart0:
货币:num.toFixed(2).replace(/(\d) ...
JS将数字转换成三位逗号分隔的样式 -
cnxxg:
这样能处理一个元素含有多个classname的情况吗?
javascript 整合的获取ID,className,tagName的方法
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv='Content-Type' content='text/html; charset=UTF-8' /> <title>Cross-Domain iframe Resizing</title> <script type="text/javascript"> var FrameManager = { currentFrameId : '', currentFrameHeight : 0, lastFrameId : '', lastFrameHeight : 0, resizeTimerId : null, init: function() { if (FrameManager.resizeTimerId == null) { FrameManager.resizeTimerId = window.setInterval(FrameManager.resizeFrames, 500); } }, resizeFrames: function() { FrameManager.retrieveFrameIdAndHeight(); if ((FrameManager.currentFrameId != FrameManager.lastFrameId) || (FrameManager.currentFrameHeight != FrameManager.lastFrameHeight)) { var iframe = document.getElementById(FrameManager.currentFrameId.toString()); if (iframe == null) return; iframe.style.height = FrameManager.currentFrameHeight.toString() + "px"; FrameManager.lastFrameId = FrameManager.currentFrameId; FrameManager.lastFrameHeight = FrameManager.currentFrameHeight; window.location.hash = ''; } }, retrieveFrameIdAndHeight: function() { if (window.location.hash.length == 0) return; var hashValue = window.location.hash.substring(1); if ((hashValue == null) || (hashValue.length == 0)) return; var pairs = hashValue.split('&'); if ((pairs != null) && (pairs.length > 0)) { for(var i = 0; i < pairs.length; i++) { var pair = pairs[i].split('='); if ((pair != null) && (pair.length > 0)) { if (pair[0] == 'frameId') { if ((pair[1] != null) && (pair[1].length > 0)) { FrameManager.currentFrameId = pair[1]; } } else if (pair[0] == 'height') { var height = parseInt(pair[1]); if (!isNaN(height)) { FrameManager.currentFrameHeight = height; FrameManager.currentFrameHeight += 15; } } } } } }, registerFrame: function(frame) { var currentLocation = location.href; var hashIndex = currentLocation.indexOf('#'); if (hashIndex > -1) { currentLocation = currentLocation.substring(0, hashIndex); } frame.contentWindow.location = frame.src + '?frameId=' + frame.id + '#' + currentLocation; } }; window.setTimeout(FrameManager.init, 300); </script> </head> <body> <div id="page-wrap"> <h1>Cross-Domain iframe Resizing</h1> <iframe id="frame-one" scrolling="no" frameborder="0" src="http://digwp.com/examples/iFrameSource/source.html" onload="FrameManager.registerFrame(this)"></iframe> </div> </body> </html>
发表评论
-
使用javascript动态创建SVG对象的问题
2011-04-24 01:04 2249如何在html中操作SVG对象的问题,对于嵌入式<emb ... -
YUI3 事件
2011-04-23 20:02 1594YUI3:事件 YUI的事件功能为响应DOM事件提供一个简单 ... -
直接运行html的代码
2010-12-07 17:19 894function runCode(pTargetId){ v ... -
JS正则表达式详解
2010-10-28 10:12 984JS的正则表达式 //校验是否全由数字组成 代码 va ... -
如何在事件代理中正确使用 focus 和 blur 事件
2010-10-21 22:09 1639什么是事件代理(Event Delegation)? 如果不 ... -
如何判断脚本加载完成
2010-10-21 22:04 969在“按需加载”的需求中,我们经常会判断当脚本加载完成时,返回一 ... -
JavaScript 获取事件对象的一个注意点
2010-10-21 22:00 979平时我们获取事件对象一般写法如下: function get ... -
判断 iframe 是否加载完成的完美方法
2010-10-21 21:52 979var iframe = document.createEle ... -
JS将数字转换成三位逗号分隔的样式
2010-08-02 16:33 3798function formatNumber(num){ ... -
YUI 3.0应用初探
2010-06-04 22:42 1373很惭愧。。。YUI3出来这么久了,一直都没有机会正式使用。。这 ... -
话说browser的脚本并行下载
2009-12-12 13:32 1393在讨论这次的主题 ... -
初涉YUI3
2009-12-11 13:44 1179study.html <!DOCTYPE HTML ... -
基於YUI2.8的 JS版多文件上传
2009-12-11 12:41 970select files: uploading: ... -
自定义滚动条
2009-11-12 19:42 987<!DOCTYPE html PUBLIC " ... -
javascript 整合的获取ID,className,tagName的方法
2009-11-12 19:40 2569var get=function(className, tag ... -
javascript 中绑定事件监听的函数【支持数组对象绑定】
2009-11-12 19:38 1215var addEventHandler=function(ob ... -
判断指定对象是否存在于另一个对象的原型链中
2009-11-12 19:35 994prototype 下的 isPrototypeOf() 方法 ... -
基于yui3如何写模块(一)
2009-11-12 19:33 959如今的前端开发越来越oo,也越来越注重重用,娴熟的用js写出o ... -
Js 数组排序【支持对象】
2009-11-12 19:30 1117//兼容 IE&FF&Safari var ... -
如何避免Javascript事件绑定出现内存泄漏
2009-11-12 19:02 1212Javascript绑定事件时,只要DOM的事件里访问不了DO ...
相关推荐
总结来说,`iframe`跨域自适应高度模板主要是通过`CORS`解决跨域限制,通过JavaScript监听`load`事件或使用`postMessage`通信来实现内容高度的动态调整。这些技术在现代网页开发中十分常见,能帮助我们更灵活地整合...
### iframe跨域嵌套自适应高度 在网页开发过程中,`iframe`作为一种常见的网页元素,被广泛用于在当前页面中嵌入另一个独立的文档或页面。然而,在实际应用中经常会遇到一些问题,如跨域限制、自适应高度调整以及...
本篇文章将深入探讨两个关键知识点:`iframe`跨域问题以及`iframe`页面的自适应。 一、`iframe`跨域问题 跨域是Web开发中的一个重要概念,它限制了浏览器从一个源获取另一个源的资源,以保护用户的安全。当`iframe...
这个简单的JavaScript解决方案能帮助我们实现`iframe`的高度自适应,使得内容始终完全显示,避免滚动条的出现。然而,实际应用中可能还会遇到其他复杂情况,如延迟加载、动态插入的`iframe`等,这时可能需要结合更多...
标题"iframe跨域高度自适应例子源码"指的是一个实例,展示了如何在跨域的情况下使`iframe`内容自动调整高度以适应其内部内容。这个例子提供了一个在线演示(http://okiner.cn/demo/cross-domain/iframe.html)以及源...
1. **同源策略与iframe跨域** 同源策略是浏览器安全的一项基础机制,它限制了来自不同源的"文档"或脚本相互交互。当一个`iframe`加载的页面与包含它的页面不在同一个源下时,就会遇到跨域问题。为了解决这个问题,...
标题“Iframe 高度自适应浏览器高度”涉及的核心知识点是如何让Iframe的大小根据其内容自动调整,特别是高度,以便始终保持与浏览器窗口的高度同步,从而提供更好的用户体验。 首先,我们需要了解Iframe的基本结构...
标题提到的“iframe自动适应高度(完美自适应高度嵌套代码)”提供了一个解决方案,它能够确保`iframe`在各种主流浏览器中都能正确地自适应内容高度,包括360浏览器、IE6-9、遨游、火狐以及搜狗浏览器。 在传统的`...
总的来说,通过使用JavaScript动态计算`<iframe>`内容的高度并设置`<iframe>`的高度,可以有效地解决`<iframe>`内容高度自适应以及设置高度后无法缩小的问题。同时,要注意兼容性问题和跨域限制,以确保在各种环境下...
2. **JavaScript**:使用JavaScript来动态获取`iframe`的内容高度和宽度。可以监听`load`事件,当`iframe`加载完成后,通过`contentWindow`和`contentDocument`属性获取内容的尺寸,然后调整`iframe`的大小。例如: ...
Iframe的`height`属性决定了其显示区域的高度,当我们想要Iframe内容自适应时,我们需要动态地修改这个属性值,使其等于Iframe内部页面的滚动高度(scrollHeight)。 下面是一个简单的JavaScript函数,用于自动调整...
本文将深入探讨如何实现IFrame跨域高度自适应的解决方案。 首先,我们需要了解什么是跨域。在Web安全策略中,浏览器执行同源策略,这意味着一个网页只能访问与之同源(协议、域名、端口相同)的IFrame内容。但当...
本篇文章将深入探讨如何解决iframe跨域高度自适应的问题。 首先,我们需要理解为什么会出现跨域问题。根据浏览器的同源策略,一个网页只能访问与之同源(即协议、域名和端口完全相同)的资源。而跨域则意味着iframe...
- 另一个问题是跨域问题,由于同源策略的限制,浏览器不允许JavaScript在不同的源之间获取或修改DOM元素,这使得在父页面中动态获取iframe内容的高度变得复杂。 3. **解决方案**: - **JavaScript/jQuery方法**:...
然而,由于同源策略的限制,跨域的`iframe`无法通过JavaScript获取其内容的高度,这给高度自适应带来了挑战。 **解决方法:** 1. **纯CSS解决方案**: 在某些情况下,如果`iframe`内容与主页面同源,可以使用CSS...
一种常见的方法是使用JavaScript监听iframe的load事件,当iframe内容加载完成后,通过JavaScript获取iframe的实际内容高度,并将其设置为iframe的style.height属性。以下是一个简单的实现示例: ```javascript ...
本话题将深入探讨如何使`iframe`自适应其子页面的内容高度,确保用户无需滚动主页面即可查看全部子页面内容。 `iframe`的基本结构如下: ```html <iframe src="child-page....
然而,`iframe`的一个常见问题是,其内容高度可能超出容器的高度,导致页面布局出现问题。为了解决这个问题,我们需要实现一个自适应高度的`iframe`,使其能根据内部内容自动调整高度。本文将深入讲解如何通过...
总结来说,通过JavaScript控制Iframe自适应被嵌入页面的高度,可以有效地解决内容显示不全的问题。这涉及到对DOM操作、事件监听、以及跨域通信的理解。同时,我们还需要关注浏览器兼容性,确保在不同的环境下都能...