用jQuery改变iframe源码
我一直在尝试这一点,现在已经看过类似问题的其他答案,但是当我试图改变一个iframe的src属性,它会更新它的整个窗口。 下面是我正在使用的代码工作正常(没有jQuery):
<html> <head> <style type="text/css"> iframe#ifrm { border:none; padding:.5em; margin:1.5em 0 1em; width:100%; height:100%; } </style> <script src="./js/jquery-1.4.2.js" type="text/javascript"></script> <script type="text/javascript"> // <![CDATA[ // !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! // this is the function I'm trying to replace: function loadIframe(iframeName, url) { if ( window.frames[iframeName] ) { window.frames[iframeName].location = url; return false; } return true; } // ]]> </script> </head> <body> <ul> <li><a href="http://www.google.com/" onclick="return loadIframe('ifrm', this.href)">Page 1</a> </li> <li><a href="tabs.html" onclick="return loadIframe('ifrm', this.href)">Page 2</a></li> </ul> <div class="iframe"> <iframe name="ifrm" id="ifrm" src="tabs.html" frameborder="0"> Your browser doesn't support iframes.</iframe>
正如我所说,我已经尝试过了
$('#ifrm').attr('src', "http://www.google.com")
显示页面,但不在iframe中。 我真的只是在学习jquery,但我无法弄清楚我的情况与其他类似的问题有什么不同:
jquery和iFrame更新
谢谢。
应该工作。
这是一个工作的例子:
function loadIframe(iframeName, url) { var $iframe = $('#' + iframeName); if ( $iframe.length ) { $iframe.attr('src',url); return false; } return true; }
使用指向外部域的attr()可能在Chrome中触发如下错误:“由于X-Frame-Options禁止显示,拒绝显示文档”。 解决方法是将整个iframe HTML代码移动到脚本中(例如在jQuery中使用.html())。
例:
var divMapLoaded = false; $("#container").scroll(function() { if ((!divMapLoaded) && ($("#map").position().left <= $("#map").width())) { $("#map-iframe").html("<iframe id=\"map-iframe\" " + "width=\"100%\" height=\"100%\" frameborder=\"0\" scrolling=\"no\" " + "marginheight=\"0\" marginwidth=\"0\" " + "src=\"http://www.google.it/maps?t=m&cid=0x3e589d98063177ab&ie=UTF8&iwloc=A&brcurrent=5,0,1&ll=41.123115,16.853177&spn=0.005617,0.009943&output=embed\"" + "></iframe>"); divMapLoaded = true; }