js和jquery给iframe src赋值的3种方法

 

网页使用iframe嵌入网页时，有时候需要动态处理src的值，而不是写死的，所以我们需要知道如何给iframe src赋值，通常是使用js或jquery来实现。本文介绍js和jquery给iframe src赋值的3种方法。

方法一

这是最常用的js给iframe src赋值的方法，代码如下：

<!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 src赋值的方法</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

</head>

<body>

<iframe frameborder="1" id="barframe" ></iframe>

</body>

</html>

<script type="text/javascript">

document.getElementById("barframe").src = "http://localhost/EXAMPLE/iframe/example.html";

</script>

方法二

通过js创建一个iframe元素，然后再给该元素src赋值，代码如下：

<!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 src赋值的方法</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

</head>

<body>

</body>

</html>

<script type="text/javascript">

var myIframe = document.createElement('iframe');

myIframe.src = 'http://localhost/EXAMPLE/iframe/example.html';

document.body.appendChild(myIframe);

</script>

最后一句 document.body.appendChild(myIframe); 是表示在 body 里添加刚定义的 myIframe 这个控件。

我们也可以把该iframe添加到某一个div容器里，写法如下：document.getElementById("div1").appendChild(myIframe); ， div1是该div容器的id 。

方法三

上面两个方法都是用js来实现的，其实我们也可以用jquery来实现，代码如下：

<!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 src赋值的方法</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script src="http://www.webkaka.com/script/jquery-1.4.2.min.js" type="text/javascript"></script>

<script>

$(document).ready(function() {

  $('#barframe').attr('src', 'http://localhost/EXAMPLE/iframe/example.html');

});

</script>

</head>

<body>

<iframe frameborder="1" id="barframe"></iframe>

</body>

</html>

特别注意，上述jquery代码不能缺少 $(document).ready(); ，否则iframe src赋值失败，除非把jquery的代码放在 <iframe ... 的html代码后面。此外，还需要在 <head></head> 里引用 jquery.js 文件

js和jquery给iframe src赋值的3种方法的更多相关文章

  1. js 跨域 Jquery取得iframe中元素的几种方法

    http://www.jb51.net/article/34942.htm 收集利用Jquery取得iframe中元素的几种方法 : 父页面访问子页面 $(document.getElementByI ...

  2. 解析Jquery取得iframe中元素的几种方法

    iframe在复合文档中经常用到,利用jquery操作iframe可以大幅提高效率,这里收集一些基本操作,需要的朋友可以参考下   DOM方法:父窗口操作IFRAME:window.frames[&q ...

  3. Jquery取得iframe中元素的几种方法（转载）

    iframe在复合文档中经常用到,利用jquery操作iframe可以大幅提高效率,这里收集一些基本操作 DOM方法:父窗口操作IFRAME:window.frames["iframeSon ...

  4. [浪风转载]Jquery取得iframe中元素的几种方法

    iframe在复合文档中经常用到,利用jquery操作iframe可以大幅提高效率,这里收集一些基本操作 DOM方法:父窗口操作IFRAME:window.frames["iframeSon ...

  5. Jquery取得iframe中元素的几种方法Javascript Jquery获取Iframe的元素、内容或者ID

    query取得iframe中元素的几种方法 在iframe子页面获取父页面元素代码如下: $('#objId', parent.document);// 搞定... 在父页面 获取iframe子页面的 ...

  6. Jquery取得iframe中元素的几种方法

    [jquery]获取iframe中的body元素: $("iframe").contents().find("body").html(); [使用jquery操 ...

  7. 使用JS和JQuery 阻止表单提交的两种方法

    <html> <head> <meta http-equiv="Content-Type" content="text/html; char ...

  8. jquery得到iframe src属性值的方法

    这篇文章主要介绍了jquery得到iframe src属性值的方法,很简单,很实用,需要的朋友可以参考下 取得iframe src属性的的值: Html代码 <!DOCTYPE HTML> ...

  9. jQuery 判断checkbox是否被选中 4种方法

    下午写JS验证,有一个需求需要判断 checkbox是否被选择,查阅相关资料后,总结以下4种方法,分享给大家. <!DOCTYPE html> <html lang="en ...

随机推荐

  1. String 字符串基本使用

    目录 一.JavaDoc解释 二.基础属性和构造函数 三.基本方法说明 一.JavaDoc解释 String类表示字符串,所有Java程序中的字符串像是"abc"都是此类的实例,字 ...

  2. Enum to String 一般用法

    目录 一.Enum Review 二.使用name()方法转换为String 三.使用toString()方法转换为String 四.使用成员属性转换为String 一.Enum Review ​ J ...

  3. java验证码图片

    package com.su.servlet; import java.awt.Color; import java.awt.Font; import java.awt.Graphics; impor ...

  4. POJ 1183 反正切函数的应用(数学代换，基本不等式)

    题目链接:http://poj.org/problem?id=1183 这道题关键在于数学式子的推导,由题目有1/a=(1/b+1/c)/(1-1/(b*c))---------->a=(b*c ...

  5. SSM整理笔记3——配置解析

    github:https://github.com/lakeslove/SSM 项目的目录结构如下 首先,配置web.xml <?xml version="1.0" enco ...

  6. HDU1693 Eat the Trees —— 插头DP

    题目链接:https://vjudge.net/problem/HDU-1693 Eat the Trees Time Limit: 4000/2000 MS (Java/Others)    Mem ...

  7. codeforces 460B Little Dima and Equation 解题报告

    题目链接:http://codeforces.com/problemset/problem/460/B 题目意思:给出a, b, c三个数,要你找出所有在 1 ≤ x ≤ 1e9 范围内满足 x =  ...

  8. hdu acm 1114 Piggy-Bank 解题报告

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1114 题目意思:给出一个空的猪仔钱ang 的重量E,和一个装满钱的猪仔钱ang 的重量F你,实质上能装 ...

  9. 编程方式取得Spring上下文的Properties

    在spring初始化时,可以使用Properties配置器把properties文件装载到Spring的上下文中. ... xmlns:context="http://www.springf ...

  10. 机器学习 Hidden Markov Models 3

    Viterbi Algorithm 前面我们提到过,HMM的第二类问题是利用HMM模型和可观察序列寻找最有可能生成该观察序列的隐藏变量的序列.简单来说,第一类问题是通过模型计算生成观察序列的概率,而第 ...