动态生成的IFRAME，设置SRC时的问题解决分析

先看例子：

无标题文档

var ifr = document.createElement("IFRAME");
document.body.appendChild(ifr);
ifr.src = "http://www.baidu.com";

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

这段，ifr.src放到append之后，运行，表面没有什么，看似正常。但是如果您用抓包工具看一下，就会发现当刷新（F5或刷新按钮）时，会多出一个请求：

00:00:04.671 0.021 * GET Aborted text/html http://www.baidu.com/

虽然是 状态是Aborted，但这个请求仍然被送到了服务器！

如果把 ifr.src放到 append之前呢？这个问题就没有了！

类似的还有：
把ifr.frameBorder = 0 放到 append之后，这个iframe仍可以看边框。放到append之前，边框就是0了。
把ifr.scrolling = "no" 放到 append之后，不起作用，放到 append之前，才起作用。
ifr.width,ifr.height无论放在前还是在后，都没有影响。

但是，如果你想在那个iframe的地址后面加个临时参数,以达到每次都请求新页面的效果，把 ifr.src 放到 append之前，就不行了（刷新或F5时）！

如代码：

无标题文档

var ifr = document.createElement("IFRAME");
ifr.frameBorder = 0;
ifr.scrolling = "no";
ifr.src = "http://www.baidu.com?tmp=" + (new Date().getTime().toString(36));
document.body.appendChild(ifr);
ifr.width = 500;
ifr.height = 500;

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

你可以监视一下，每次刷新时，那个 tmp 都是同一个值！除非你重新载入（非 F5/刷新）。
换种方法呢？用document.write来实现？可以告诉你，也不行！

赞 (0)

相关推荐

  • 动态生成的IFRAME，设置SRC时的问题解决分析

    先看例子: 无标题文档 var ifr = document.createElement("IFRAME"); document.body.appendChild(ifr); ifr.src = "http://www.baidu.com"; [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 这段,ifr.src放到append之后,运行,表面没有什么,看似正常.但是如果您用抓包工具看一下,就会发现当刷新(F5或刷新按钮)时,会多出一个请求: 00:00:

  • 动态生成的IFRAME，设置SRC时的，不同位置带来的影响

    先看例子: 我们 www.jb51.net var ifr = document.createElement("IFRAME"); document.body.appendChild(ifr); ifr.src = http://www.jb51.net; [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 这段,ifr.src放到append之后,运行,表面没有什么,看似正常.但是如果您用抓包工具看一下,就会发现当刷新(F5或刷新按钮)时,会多出一个请求: 00:00:04.

  • 配置Grunt的Task时通配符支持和动态生成文件名问题

    copy: { // 这是Task里的其中一个Target dests: { expand: true, cwd: '<%=config.app%>/newFolder', src: ['**/{a*,b*}.html'], dest: '<%=config.dist%>/newFolder', ext: ".shtml", extDot: "first", flatten:true, //去掉中间上当,下面的rename可以再找回来 ren

  • elementUI 动态生成几行几列的方法示例

    elementUI 动态生成几行几列的方法示例

    elementUI 动态生成几行几列 table 现在碰到一个需求:就是根据用户选择的行列,来自动生成相应大小的 table,如下这个实现还不完善,因为数据不对,只是实现了动态的效果,仅是提供一种实现思路吧,后续我会再想想看怎么实现为好,先记录一下吧 直接看代码吧 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>el

  • Vue动态设置图片时src不生效的原因及解决方法

    Vue动态设置图片时src不生效的原因及解决方法

    目录 原因分析 解决方法 import和require的区别 原因分析 在vue项目中动态设置img的src时,图片会加载失败.我们可以先看个例子. <template> <div> <h1>动态设置图片</h1> <div> <h5>图片一</h5> <img :src=" logoFlag === 'vue' ? '../assets/vue-logo.png' : '../assets/react-l

  • 动态加载iframe时get请求传递中文参数乱码解决方法

    当用户的页面需要动态加载iframe 时, 如果iframe的src中包传中文参数会出现编码错误:必须加编码,然后再解码. 编码:encodeURI(encodeURI("包含中文的串")) 解码:java.net.URLDecoder.decode("需要解码的串","utf-8"); 解决方案 使用 encodeURI('中文') 进行编码操作, js代码: 复制代码 代码如下: $(function() { $('#frame').attr

  • Java运行时动态生成类实现过程详解

    最近一个项目中利用规则引擎,提供用户拖拽式的灵活定义规则.这就要求根据数据库数据动态生成对象处理特定规则的逻辑.如果手写不仅每次都要修改代码,还要每次测试发版,而且无法灵活根据用户定义的规则动态处理逻辑.所以想到将公共逻辑写到父类实现,将特定逻辑根据字符串动态生成子类处理.这就可以一劳永逸解决这个问题. 那就着手从Java如何根据字符串模板在运行时动态生成对象. Java是一门静态语言,通常,我们需要的class在编译的时候就已经生成了,为什么有时候我们还想在运行时动态生成class呢? 经过一

  • Java运行时动态生成对象的方法小结

    目录 一.利用JDK自带工具类实现 二.利用三方Jar包实现 三.利用Groovy脚本实现 最近一个项目中利用规则引擎,提供用户拖拽式的灵活定义规则.这就要求根据数据库数据动态生成对象处理特定规则的逻辑.如果手写不仅每次都要修改代码,还要每次测试发版,而且无法灵活根据用户定义的规则动态处理逻辑.所以想到将公共逻辑写到父类实现,将特定逻辑根据字符串动态生成子类处理.这就可以一劳永逸解决这个问题. 那就着手从Java如何根据字符串模板在运行时动态生成对象. Java是一门静态语言,通常,我们需要的c

  • javascript中兼容主流浏览器的动态生成iframe方法

    以下代码在IE8下运行通过,在IE9中出错: 复制代码 代码如下: document.createElement('<iframe id="yige-org-iframe" src="yige.org.logo.gif" style="position:absolute;top:0;left:0;width:1px;height:1px;visibility:hidden;"></iframe>'); 错误提示:excep

  • 使用jQuery.Qrcode插件在客户端动态生成二维码并添加自定义Logo

    使用jQuery.Qrcode插件在客户端动态生成二维码并添加自定义Logo

    0 Jquery.Qrcode简介 Jquery.Qrcode.js是一个在浏览器端基于Jquery动态生成二维码的插件,支持Canvas和Table两种渲染方式,它的优点是在客户端动态生成,减轻了服务端压力,尤其是在大量使用二维码的系统中.Jquery.Qrcode主要包括以下参数设置: •render 定义二维码的渲染方式,有table和canvas两种渲染方式 •width 定义二维码的宽度 •height 定义二维码的高度 •text 定义二维码内容 •typeNumber 二维码的计算

随机推荐