当前位置:  编程技术>WEB前端
本页文章导读:
    ▪图片img的src不变,想让浏览器重新加载怎么办?      在图片地址src不变的情况下让浏览器重新加载图片实际上,在src不变时,浏览器直接就去读取缓存了解决办法:var img_src ='http://www.ilsea.net/images/seagull.jpg'+Math.random();这样给图片地址拼接一个随.........
    ▪以 ajax 方式提交 file 表单      不刷新提交 file 表单,实则是通过 iframe 来实现的:test.html 代码:<html><head><script type="text/javascript">function test(msg){ alert(msg);}</script></head><body><form action="/blog_article/test.html" encty.........
    ▪JavaScript 处理Iframe自适应高度的问题      1.同域名下Iframe自适应高度的处理<iframe onload="Javascript:SetIFrameHeight(this)" src="/Home/b/index.html" id="win" name="win" width="100%" height="1"> </iframe> 当然此处我用的是Asp.Net MVC  此处src设置为路由结.........

[1]图片img的src不变,想让浏览器重新加载怎么办?
    来源:    发布时间: 2013-11-19

在图片地址src不变的情况下让浏览器重新加载图片
实际上,在src不变时,浏览器直接就去读取缓存了
解决办法:

var img_src ='http://www.ilsea.net/images/seagull.jpg'+Math.random();

这样给图片地址拼接一个随机数,用js重新给 img 的 src 赋值,okay

本文链接


    
[2]以 ajax 方式提交 file 表单
    来源:    发布时间: 2013-11-19

不刷新提交 file 表单,实则是通过 iframe 来实现的:

test.html 代码:

<html>
<head>
<script type="text/javascript">
function test(msg){
alert(msg);
}
</script>
</head>
<body>
<form action="/blog_article/test.html" enctype="multipart/form-data" method="post" target='hidden_iframe'>
<input type="file" id="file" name="file" />
<input type="submit" value="submit" /></form><iframe name="hidden_iframe" id="hidden_iframe" ></iframe>
</body></html>

test.php 代码:

<?php
... code goes here ...
echo "<script type='text/javascript'>parent.test('some messages');</script>";
?>

本文链接


    
[3]JavaScript 处理Iframe自适应高度的问题
    来源:    发布时间: 2013-11-19

1.同域名下Iframe自适应高度的处理

<iframe onload="Javascript:SetIFrameHeight(this)" src="/Home/b/index.html" id="win" name="win" width="100%" height="1"> </iframe>

 当然此处我用的是Asp.Net MVC  此处src设置为路由结构

<script type="text/javascript">
function SetIFrameHeight(obj) {
var win = obj;
if (document.getElementById) {
if (win && !window.opera) {
if (win.contentDocument && win.contentDocument.body.offsetHeight)
win.height = win.contentDocument.body.offsetHeight;
else if (win.Document && win.Document.body.scrollHeight)
win.height = win.Document.body.scrollHeight;
}
}
}
</script>

 用到的就是iframe嵌套的页面加载完毕的时候,运用onload事件来获取嵌套在iframe中网页的高度,然后赋值给Iframe的高度即可。

2.跨域时Iframe高度自适应

 

在主页面和被嵌套的iframe为不同域名的时候,就稍微麻烦一些,需要避开JavaScript的跨域限制。
原理:现有iframe主页面main.html、被iframe嵌套页面iframe.html、iframe中介页面agent.html三个,通过main.html(域名为http://www.ccvita.com)嵌套iframe.html(域名为:http://www.phpq.net),当用户浏览时执行iframe.html中的JavaScript代码设置iframeC的scr地址中加入iframe页面的高度,agent.html(域名为:http://www.ccvita.com)取得传递的高度,通过JavaScript设置main.html中iframe的高度。最终实现预期的目标。
iframe主页面main.html
< !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><title>iframe主页面</title></head>
<body>

<div >
<iframe id="frame_content"  name="frame_content" src="/blog_article/iframe.html" width="100%" height="0" scrolling="no" frameborder="0"></iframe>
</div>
<br />尾部<br />

</body>
</html>
iframe嵌套页面iframe.html
< !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><title>被iframe嵌套页面</title></head>
<body>

文字<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
文字<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
文字<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
文字<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

<iframe id="iframeC" name="iframeC" src="" width="0" height="0" ></iframe>

<script type="text/javascript">
function sethash(){
    hashH = document.documentElement.scrollHeight;
    urlC = "agent.html";
    document.getElementByIdx("iframeC").src=/blog_article/urlC/index.html"#"+hashH;
}
window.onload=sethash;
</script>

</body>
</html>
iframe中介页面agent.html
< !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><title>iframe中介页面</title></head>

<body>

<script>
function  pseth() {
    var iObj = parent.parent.document.getElementByIdx('frame_content');
    iObjH = parent.parent.frames["frame_content"].frames["iframeC"].location.hash;
    iObj.style.height = iObjH.split("#")[1]+"px";
}
pseth();
</script>

</body>
</html>
代码里,kimi可能路径表示不全
main.html 与 agent.html 是必须同一个域里
而iframe.html在另一个域

本文链接


    
最新技术文章:
编程技术其它 iis7站长之家
▪IE里button设置border:none属性无效解决方法
▪border:none与border:0使用区别
▪html清除浮动的6种方法示例
▪三个不常见的 HTML5 实用新特性简介
▪css代码优化的12个技巧
▪低版本IE正常运行HTML5+CSS3网站的3种解决方案
▪CSS Hack大全-教你如何区分出IE6-IE10、FireFox、Chr...
▪ie6,ie7,ie8完美支持position:fixed的终极解决方案
▪小技巧处理div内容溢出
▪html小技巧之td,div标签里内容不换行
▪纯CSS实现鼠标放上去改变文字内容
▪li中插入img图片间有空隙的解决方案
▪CSS3中Transition属性详解以及示例分享
▪父div高度不能自适应子div高度的解决方案
▪告别AJAX实现无刷新提交表单
▪从零学CSS系列之文本属性
▪HTML 标签
▪CSS3+Js实现响应式导航条
▪CSS3实例分享之多重背景的实现(Multiple background...
▪用css截取字符的几种方法详解(css排版隐藏溢...
▪页面遮罩层,并且阻止页面body滚动。bootstrap...
▪CSS可以做的几个令你叹为观止的实例分享
▪详细分析css float 属性以及position:absolute 的区...
▪IE6/IE7/IE8/IE9中tbody的innerHTML不能赋值的完美解...
▪CSS小例子(只显示下划线的文本框,像文字一...
▪可以给img元素设置背景图
▪不通过JavaScript实现的自动滚动视差效果
▪div+CSS 兼容小摘
▪CSS的inherit与auto使用分析
 


站内导航:


特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

©2012-2021,,E-mail:www_#163.com(请将#改为@)

浙ICP备11055608号-3