JQuery设置iframe的src值

最新推荐文章于 2021-06-03 15:24:11 发布
最新推荐文章于 2021-06-03 15:24:11 发布
阅读量8.7k 收藏 3
点赞数 1
分类专栏： jQuery 文章标签： JQuery
本文介绍了如何使用jQuery操作iframe内的元素，包括改变src属性、获取特定div内容等操作。

$(window.parent.document).find("#Frm_Main").attr("src",url); 


使用jquery操作iframe 


1 内容里有两个ifame 

<iframe id="leftiframe"...</iframe> 
<iframe id="mainiframe..</iframe> 

leftiframe中jQuery改变mainiframe的src代码： 
$("#mainframe",parent.document.body).attr("src","http://www.youkuaiyun.com ") 

2 如果内容里面有一个ID为mainiframe的ifame 
<iframe id="mainifame"...></ifame> 
ifame包含一个someID 
<div id="someID">you want to get this content</div> 
得到someID的内容 

$("#mainiframe").contents().find("someID").html() html 或者 $("#mainiframe").contains().find("someID").text()值 

2 如上面所示 
leftiframe中的jQuery操作mainiframe的内容someID的内容 
$("#mainframe",parent.document.body).contents().find("someID").html()或者 $("#mainframe",parent.document.body).contents().find("someID").val()
JQUERY设置IFRAME的SRC值的代码
12-11
代码如下:$(window.parent.document).find(“#Frm_Main”).attr(“src”,url); 使用jquery操作iframe 1 内容里有两个ifame <iframe id=”leftiframe”…</iframe> <iframe id=”mainiframe..</iframe> leftiframe中jQuery改变mainiframe的src代码： $(“#mainframe”,parent.document.body).attr(“src”,”//www.jb51.net “) 2 如果内容里面有一个ID为mainiframe的ifame
jquery得到iframe src属性值的方法
12-08
在本篇文章中，我们将详细探讨如何使用`jQuery`获取`iframe`的`src`属性值。 首先，我们要理解`iframe`的基本概念。`iframe`（Inline Frame）是HTML中的一种元素，用于在当前文档中嵌入另一个文档，通常用来展示...
jquery 修改iframe src
热门推荐
杨明的博客
10-31 5万+
言简意赅点 1、iframe 代码如下 2、初始加载时调用listReload.action $(document).ready(function(){ var name = $('#type').val(); $('input:radio[name="serviceClasses"][value="'+name+'"]').prop('check
Jquery 设置 iframe src属性
xinjiatao的专栏
04-09 1046
  var ss= "http://www.baidu.com?n="+ Math.random(); $("#hardIframe").attr("src",ss); $('#hardIframe').attr('src', $('#hardIframe').attr('src')); function refWin(){ $.ajax({ type : 'POST',...
jquery设置iframe的src值
Anmin
07-01 327
  $(window.parent.document).find("#Frm_Main").attr("src","http://anmin.iteye.com");    
jQuery怎么给iframe的src赋值
syq8023的博客
06-20 4463
jQuery的attr方法可以为元素的属性赋值，例如： $('iframe').attr('src','src的值'); 以上代码将会为所有的iframe设置src值为“src的值” 扩展： attr赋值方法详细用法如下： .attr(attributeName,value) 描述:设置每一个匹配元素的一个或多个属性。 attributeName： 类型:String ...
详解iframe的src指向的内容不刷新的解决办法
11-20
iframe的src的值发生改变,才会刷新iframe里面的内容. 所以虽然我代码的url对应的页面有变化了,可是url一直不变,也就是iframe的src的值一直没变.所以不刷新内容; 解决办法 原因找到了,解决就非常容易了.想任何一种...
jQuery如何动态设置iframe的src属性
关关x雎鸠的博客
10-30 1万+
一句搞定，不搞那些花里胡哨的 $('#InformationURL').attr('src', 'https://www.baidu.com'); //#InformationURL: iframe的id="InformationURL"，注意这里的#是后加上的 //这里将src设置为百度,当然你也可以设置为参数形式 //其他的为固定写法 ...
JQuery修改frame的src
凌晨de太阳
11-03 6449
1、JQuery修改同级别frame的src（即：index.html中有id分别为A、B的两个fram，在A中通过JQuery修改B的src） 在A链接的页面中添加如下JQuery代码： function changeframsrc(id) { var strhref = "你定义的B新的src地址"; parent.$("#A").attr(
jquery获取，更改iframe的src的值
pangunvwa的专栏
10-24 1205
$('#iframe_ID').attr("src","xx.jsp");
iframe的src赋值问题(服务器端)
09-28
frame的src赋值的问题，本文将进行详细探讨:服务器端的iframe重新src重新赋值,给iframe加一个ID，再加上runat=server，感兴趣的你可不要错过了哈
iframe内jquery修改本iframe的src属性
u014650004的博客
09-12 1854
iframe内jquery修改本iframe的src属性 1）结构 index.html包含news_detail.html页面 2）news_detail.html页面修改iframe的src属性 $('#home_ifram', window.parent.document).attr('src','/admin/website/news_list?type=1')
Js或jQuery动态改变iframe的src
谪仙
10-26 1万+
[b][color=red]一丶用途[/color][/b] 有时候，浏览器需要显示一个列表，点击列表中的某一个，下方的显示也随之而改变，显示当前选中的信息，如果下面显示的信息量较少还可以用Ajax动态改变HTML来实现异步刷新，但要是显示的很多呢，这样动态改变代码就显得不切实际了，这时候可以用到Iframe子框架，在父页面点选其中一个时，将选中的值作为参数，并重新生成Iframe的src，这就...
jq 动态修改iframe的src（vue在线预览Word）
macangyewangs的博客
11-03 1053
<iframe src="" width="900px" height="610px" name="listReload" style="border: 0px;"></iframe> created() { this.getparams(); }, getparams(){ var url=this.$store.state.orignsystemditrow.content;//你要拼接的地址 $(document).ready(function
【Jquery】------- iframe标签获取属性src中的标签(元素)input值实例代码
皮皮冰要做大神
01-18 1588
<iframe id="iframe" src="/pub/job/cron_editor/CronEditor.htm"></iframe> var iframe = window.document.getElementById("iframe"); // iframe.contentWindow.methodName()...
jq修改iframe html代码,jQuery控制iFrame(实例代码)
weixin_35834687的博客
06-03 446
用jQuery在IFRAME里取得父窗口的某个元素的值只好用DOM方法与jquery方法结合的方式实现了1.在父窗口中操作 选中IFRAME中的所有单选钮$(window.frames["iframe1"].document).find(”input[@type='radio']“).attr(”checked”,”true”);2.在IFRAME中操作 选中父窗口中的所有单选钮$(window....
Js/Jquery获取iframe中的元素
adobe1992
09-18 7484
在web开发中，经常会用到iframe，难免会碰到需要在父窗口中使用iframe中的元素、或者在iframe框架中使用父窗口的元素。 js 在父窗口中获取iframe中的元素 1. Js代码   格式：window.frames["iframe的name值"].document.getElementById("iframe中控件的ID").click();
jquery动态给iframe的src赋值
最新发布
06-24
<think>我们正在处理用户关于使用jQuery动态设置iframe的src属性值的问题。根据引用[1]和引用[2]中提到的内容，我们知道可以通过jQuery选择iframe元素，然后使用.attr()或.prop()方法来修改其src属性。引用[1]中展示了如何获取iframe的contentWindow来操作其内部文档，这暗示了我们可以通过类似的方式操作iframe本身。引用[2]中提到了一个函数，它通过iframe的id来获取其src中的参数，这也说明我们可以通过设置src属性来改变iframe的内容。引用[3]则提醒我们，在某些情况下（如加载PDF）可能会遇到浏览器的安全限制，但设置src属性本身是可行的。因此，我们可以通过以下步骤来实现：1.使用jQuery选择器选中目标iframe元素。2.使用.attr()方法或.prop()方法设置src属性为新的URL。示例代码：```javascript//假设iframe的id为"myFrame"$('#myFrame').attr('src','https://www.example.com');//或者$('#myFrame').prop('src','https://www.example.com');```注意：attr()和prop()的区别：-attr()操作的是HTML属性，而prop()操作的是DOM属性。-对于像src这样的属性，两者都可以使用，但推荐使用prop()，因为它直接操作DOM属性，更符合现代jQuery的使用。另外，如果iframe是动态生成的，确保在设置src属性之前iframe已经存在于DOM中。如果需要在iframe加载完成后执行一些操作，可以监听load事件，如引用[1]所示：```javascript$('#myFrame').on('load',function(){console.log('iframe加载完成！');});```因此，用户的问题可以通过上述方法解决。</think>### 如何使用 jQuery 动态修改 iframe 的 src 属性 通过 jQuery 动态修改 iframe 的 `src` 属性主要有以下两种方法： #### 方法 1：使用 `.attr()` 方法（推荐） ```javascript // 通过 ID 选择器定位 iframe $('#yourIframeId').attr('src', 'https://new-url.com'); // 通过属性选择器定位 $('iframe[name="frameName"]').attr('src', 'new-page.html'); ``` #### 方法 2：使用 `.prop()` 方法 ```javascript $('#yourIframeId').prop('src', 'https://alternative-url.com'); ``` --- ### ⚠️ 注意事项 1. **跨域限制** 如果修改后的 URL 与父页面域名不同，会受到[浏览器的同源策略](https://developer.mozilla.org/zh-CN/docs/Web/Security/Same-origin_policy)限制，无法通过 JavaScript 访问 iframe 内部内容[^1]。 2. **动态创建 iframe** 若需动态创建并设置 src： ```javascript const newFrame = $('<iframe>', { src: 'dynamic.html', id: 'dynamicFrame' }); $('#container').append(newFrame); ``` 3. **加载事件处理** 监听加载完成事件： ```javascript $('#yourIframeId').on('load', function() { console.log('iframe 加载完成'); }); ``` 4. **特殊内容处理** 加载 PDF 等非 HTML 资源时，某些浏览器（如旧版 IE）可能触发安全警告[^3]。 --- ### 🌰 完整示例 ```html <button id="changeBtn">切换内容</button> <iframe id="myFrame" src="default.html"></iframe> <script> $('#changeBtn').click(function() { // 动态修改 src $('#myFrame').attr('src', 'https://newsite.com/page?param=value'); }); </script> ``` --- ### 📚 引用说明 [^1]: 通过 `.prop('contentWindow')` 可访问 iframe 内部 window 对象，但受同源策略限制[^1]。 [^2]: `src` 属性支持完整的 URL 参数传递，可通过正则表达式解析参数[^2]。 [^3]: 加载非 HTML 资源时需注意浏览器安全机制，可能影响用户体验[^3]。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值