Menu
I've been trying this for a bit now and have looked at other answers to similar questions on SO, but when I am trying to change the src attribute of an iframe, it updates it for the whole window. Here is the following code I am using that works correctly (no 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>
As I said, I've tried
$('#ifrm').attr('src', "http://www.google.com") which displays the page, but not in the iframe. I'm really just learning jquery, but I can't figure out what's different about my situation than other similar questions like this:
Jquery and iFrame update
Thanks.
255
The idea behind changing the iframe source is to switch the web page in the display of iframe . In JavaScript we can change the source or redefine it with the JavaScript default method getElementById() . We can re-assign new path or URL of webpage to getElementById("idOfElement"). src .
You can use jQuery to add jQuery effects to your iFrame elements, to change the CSS rules, or even to add content. Above, the script is used to change the background color of the . page element within the frame to white.
Should work.
Here's a working example:
http://jsfiddle.net/rhpNc/
Excerpt:
function loadIframe(iframeName, url) { var $iframe = $('#' + iframeName); if ($iframe.length) { $iframe.attr('src',url); return false; } return true; } Using attr() pointing to an external domain may trigger an error like this in Chrome: "Refused to display document because display forbidden by X-Frame-Options". The workaround to this can be to move the whole iframe HTML code into the script (eg. using .html() in jQuery).
Example:
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; } If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
