JavaScript - Dynamic Iframe Source
Hey. I've been trying to get this page working with dynamically loaded iframe sources passed by URL, but I can't seem to get it working. Here's the relavent code:
Code: <script type="text/javascript"> function delineate(str) { URL = str.indexOf("=") + 1; return(str.substring(URL)) } </script> Then there's a form/submit button that simply return the name of a type of item, for example "german" or "french" Using the form attributes method="link" and action="pageURL.html", where pageURL is the page that all of this is on. Code: <form name="hack"><input type="hidden" name="selector" /></form> <script language="javascript"> var url=window.location; document.hack.selector.value=url; var url_select=document.hack.selector.value; var selectedURL="../types/" +delineate(url_select) +".html"; document.write (selectedURL); frames['middleframe'].location.href=selectedURL; </script> <iframe id="middleframe" name="middleframe" src="../types/default.html" width="100%" scrolling="auto" height="1000" frameborder="0" style="display: inline;" /> I used the hidden form to change the url to text - advice from another website. I'm sure there are better ways to do it, but I'll explore them as soon as this thing actually works.. The types are in a subfolder named types, as shown. The document.write was placed in as a debug helper, and it displays the proper file location of whatever I select with the combo box, but the iframe doesn't change it's src to the selected page! I've tired the last line of the last <script> with several different methods, none of them producing any effect whatsoever. What am I doing incorrectly? Any help? Thanks. Similar TutorialsAll, Trying to append data from an API to the frame source; not loading. master page: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script type="text/javascript" language="javascript" name="mm_scormRTI" > <!-- Inserted by: // SCORM Runtime Wrapper // version 1.2.6 09/09/02 // Copyright 2000, 2001, 2002 Macromedia, Inc. All rights reserved. // ---------------------------------------------------- // define global var as handle to API object var mm_adl_API = null; // mm_getAPI, which calls findAPI as needed function mm_getAPI() {blah} // returns LMS API object (or null if not found) function findAPI(win) {bleh } // call LMSInitialize() function mm_adlOnload() {do api stuff- this is where i get ny value } // get the API, launch it mm_getAPI(); // --> </script> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>DCB Document</title> </head> <body onLoad="mm_adlOnload()">this is a test;</p></p></p> <iframe src="blank.htm" width="100%" height="800" id="qualtrics" name="qualtrics"> <p>Your browser does not support iframes.</p> </iframe> </p></p> <input type="button" name="mm_finishBtn" value="Finish Lesson" onClick="mm_adlOnunload()" /> </body> </html> blank.htm: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script type="text/javascript" language="javascript"> //test function loadit(){ var stud = window.opener.mm_adl_API.LMSGetValue("cmi.core.student_id"); var newlink = "https://mylink.com/stud_id=" + stud; parent.document.getElementById("qualtrics").src=newlink; } // --> </script> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>DCB meta Document</title> </head> <body onLoad="loadit()">this is a test iframe</p></p></p> </body> </html> help? i'm kind of dizzy right now since i've tried X different versions...still working on it. the new URL doesnt load i want to get the stud_id from the API and append it to the url that i launch in the iframe Hello, i'm trying to insert a dynamic js file which contains multiple functions in it (for the example : function x, function y) and it seems that my google chrome doesn't really like it so much is there anyway you know i can bypass it and make it work and both web browsers code examples: // this is where the js file supposed to go <script id="ScriptFile"> </script> //1.js contains function x and function y document.getElementById('ScriptFile').src = "/Mysite/js/1.js" later on i need to preform some actions with function x & y. Couple more issues i need to explain first there are number of js files (1,2,3 .... n ) which all contain the same functions but with different data so i cant register them hard-coded if i type the function x into the "ScriptFile" block, it does work.. its not the function problem. same goes if i include it as source in the "ScriptFile" block (<script id="ScriptFile" src="/Mysite/js/1.js") this only gives me an error while using chrome, works perfectly fine under explorer the error says it cant find function x. thanks alot! I am looking for an input text that links to a iframe. . ? To begin, we need some simple HTML elements: A basic form; An Input text that will contain the URLs we want to use; An iFrame that will display the page we select from the input text. Thanks in advance Stickers Im very new to java scripting so any help would be truly appreciated. I have a single web page that loads several iframes. One of the iframe pages has to be logged in first. I have that taken care of but once the page is loaded I need to change the source to a link with in the page. My guess is I need something to execute the code like a onload or something. This is what Ive been trying to get to work but like I said a newb! The iframe in question is named "cad" the initial source once loaded is 'https://urlname.com/mainmenu.asp' the source I need to change to is 'https://urlname.com/UnitStatusF.asp?agency_id=28' [CODE] function ChangesSrc() { var iframeid = document.getElementById(cad); var unitstatus = 'https://urlname.com/UnitStatusF.asp?agency_id=28' if (iframeid.src = 'https://urlname.com/mainmenu.asp') iframeid.src = unitstaus; return false; } [[CODE] I read the "http://bodybrowser.googlelabs.com/body.html" page into an Iframe on my page. I now need to print the "viewcontainer" DIV that resides in the iframe. Accessing divs in an iframe is an issue with cross domain sources. Can anyone help me with a workaround or different idea? Thanks in advance!! I have a script which creates an element of iframe. I have a button which refreshes the iframe link. I need to do something to change a variable in the iframe src on every click of the button. I'll explain the real issue. I have a list of games I have with random name like, boomer.swf, kingdom.swf, balloon.swf and so on. So I somehow made this, Code: var r_text = new Array (); r_text[0] = "boomer"; r_text[1] = "kingdom"; r_text[2] = "balloon"; var i = Math.floor(3*Math.random()) var gamedrome = { game: ""+r_text[i]+""}; Now I have a .js file which creates iframe element Code: function embed_game(params, options) { var data = []; for(var i in params) { data.push(i + "=" + encodeURIComponent(params[i])); } data = data.join("&"); var frame = document.createElement("iframe"); frame.src = "http://website.com/embed/game.html?"+ data; frame.style.width="100%"; frame.style.height="100%"; frame.style.border = "0"; frame.frameBorder = "0"; frame.id="newroom"; .... and another small script to refresh the inner iframe and not the page to change game. Code: <script type="text/javascript"> function Reload () { var f = document.getElementById('newroom'); f.src = f.src; } </script> It all works fine until the game is loaded, but the problem is that if once the game is loaded in site, the iframe source is already set and my button keeps loading the same game. I need to randomize it on every click. Please help me out. Ok, 'nother head-banger for the hardcore! I have a "contact us" <a> with the id 'contact' on the main page, which is supposed to change the source file of an iframe to the contact page. Except when I click on "contact us" nothing happens. I've tried to get this to work several different ways, and suspect that the problem is purely syntax, but I just haven't been able to figure it out. Here's the code: The snippet on the main page (index.html): Code: <div id="linkListContact" class="LinkList"> <img id="linkListContactBg" class="SideBarBgImg" src="Assets/Backgrounds/SideBar/ContactBg.png"></img> <span> <ul> <li> <div><a id="contact">Contact Us</a> </div> </li> </ul> </span> </div> ... and the relevant Javascript: Code: function setIFrame(frameSource) { document.getElementById('mainWindow').src = frameSource; } function setContactLink() { var contactURL = "http://katabasis.spreadshirt.com/shop/imprint" document.getElementById('contact').onclick = new Function ( "setIFrame( 'contactURL' )" ); } The setIFrame function is used to call the content initially when the page loads, and is working beautifully in that context. You can see the problem in action at the actual site: www.katabasis-apparel.com. Thanks. Hi, I wonder if the following is coded correctly: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Sample Page</title> </head> <body> <div id="container"></div> <script type="text/javascript"> var url = "http://www.example.com/"; var content = "<iframe width='800' height='600' frameborder='0' src='" + url + "'><\/iframe>"; document.getElementById("container").innerHTML = content; </script> </body> </html> Many thanks in advance! Mike Hi all! Im trying to work out a way of entering the contents of a div (which changes regularly) into a form field when it is focused on. The issue is that the div containing the text value is in an iframe of a php file (gallery.php). The div (#lbBottom) text contents that I need to use is the caption of the current photo open with a light-box style jquery plugin (slimbox). The gallery is formed using the php and needs to be in an iframe to align the lightbox correctly. #lbBottom is generated by title=\"Code: $alttag1\" and give a result of Code: +the current photo number. Ideally it is just the photo number (last 2 characters) that I need but the contents of the div will do! Would appreciate any help or advice anyone can give loads! As you will see with the mywrite function, im getting a bit tangled! GAME HTML Code: <!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="js/jquery.js" type="text/javascript" charset="utf-8"></script> <script> function mywrite() { $.get("gallery.php", function(data){ //alert("Data Loaded: " + data); document.getElementById('#lbBottom').text = myVar; var addanswer = data; }); document.quiz.q1.value.focus(); document.quiz.q1.value = addanswer alert("done"); } </script> </head> <body> <div id="leftcol"> <form id="quiz" name="quiz"> <p><label for="q1"><img src="images/q1.jpg" alt="Question1"/><span class="photoquestion">1.</span></label><input id="q1" type="text" value="" onfocus="mywrite()" name="q1" /></p> <p><label for="q2"><span>2.</span>We’ll go that extra mile!</label><input id="q2" type="text" onfocus="mywrite()" value="" name="q2" /></p> <p><label for="q3"><span>3.</span>Question 3</label><input id="q3" onfocus="mywrite()" type="text" value="" name="q3"/></p> <p><label for="q4"><img src="images/q4.jpg" alt="Question4"/><span class="photoquestion">4.</span></label><input id="q4" onfocus="mywrite()" type="text" value="" name="q4"/></p> <input class="submit" type="submit" name="submit" value="Check Answers" /> </form> </div> <iframe id="gallery_cont" src="gallery.php" name="iframe" scrolling="no"> </iframe> </body> </html> GALLERY PHP PHP Code: <!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> <script src="js/jquery.js" type="text/javascript" charset="utf-8"></script> <script src="js/lightbox.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div id="gallery"> <?php $cleanup = array(".jpg", ".","_"); $dir1 = "./adverts/"; $imageset1 = opendir($dir1); while(false != ($file1 = readdir($imageset1))) { if(($file1 != ".") and ($file1 != "..") and ($file1 != ".DS_Store") and ($file1 != "thumbs")) { $alttag1 = str_replace($cleanup," ",$file1); echo("<a href=\"./adverts/$file1\" title=\"Code: $alttag1\" rel=\"lightbox-group\" ><img src=\"./adverts/thumbs/$file1\" alt=\"$alttag1\" /></a>\n"); } } ?> </div> </body> </html> Hi I am attempting to integrate two dynamic applications. I have successfully created an iFrame in app A that serves the dynamic pages of app B. This enables me to preserve the site theme of app A. Most of app B's pages successfully display inside the app A iFrame. The problem is, when application B displays a page (inside app A's iFrame parent) clicking on a link inside that page opens that page in another iFrame (child) and I can't see what could be wrong... fresh pair of eyes would be good.... Code: <iframe id="listframe" name=target src="http://www.mysite.com/dynamicpages/" width="580" height="850" frameborder="0" scrolling="no" > </iframe> <script type="text/javascript"> window.onload = function () { var q = (document.location.search); document.getElementById('listframe').src += q; } </script> Disclaimer 1: I am not a programmer, just a curious designer, so please take that into consideration in your replies. Disclaimer 2: Despite all advices against it, I couldn't find a better solution to my website than using iFrame Disclaimer 3: Before asking for help, I researched *several* forums and although I found people discussing similar issues, I was not successful at adapting their solutions to my needs. Gentlemen, I need your help implementing a method to intercept and redirect external links to a dynamic iframe. By "dynamic" iframe I mean an iframe whose SRC would be filled up in accordance to the external URL being intercepted and that it would resize its HEIGHT accordingly in order to avoid scroll bars. The function for resizing the iframe id="child" is already correctly implemented like so: Code: <script language="JavaScript"> <!-- function calcHeight() { //find the height of the internal page var the_height= document.getElementById('child').contentWindow. document.body.scrollHeight; //change the height of the iframe document.getElementById('child').height= the_height; } //--> </script> and the call Code: <iframe src="/main/index.php" width="100%" onLoad="calcHeight();" height="1" marginheight="0" marginwidth="0" scrolling="no" frameborder="0" id="child"> This what I have going on: - index.html => contains some content and the iframe id="child" - childpage1[...N].php => several PHP pages which I do not want to show up outside of the parent "index.html". These pages use clean URLs from CMS such as "http://mydomain.com/pages/this-is-a-child-page/" Users might click on external links from search engines, for instance, about an specific page such as "http://mydomain.com/pages/this-is-child-page-7/" which obviously would load the page "orphaned", outside "index.html" and that is exactly what I am trying to avoid. Based on what I have researched so far, the best way (please, correct me if I'm wrong) to deal with this would be implementing a test condition on the header of the PHP child pages to verify if they are on "top" or not (if they are already inside the "parent" object "index.html"). If FALSE, the page would load normally, if TRUE, a variable should be created to store the URL of the requested page and passed through the link to the page "index.html" which would be immediately called. In "index.html" there would be a script to collect the variable sent through the link (something like "http://mydomain.com/?var=http://mydomain.com/pages/this-is-child-page-7/") and break the text string apart, store a portion of PATHNAME (in this case, "/pages/this-is-child-page-7/) and use it to replace the current SRC of iframe id="child". Probably, there would have to be another testing function in this script to compare the variable passed from the "orphaned" PHP page against the current value of SRC in iframe id="child" to determine if any action is actually required. This "replacement" function would be called onLoad and if tested true would run and refresh the page with the proper value in the iframe SRC. All this should be accomplished while still making the iframe HEIGHT dynamically adjustable and show a "clean" URL in the browser, such as "http://mydomain.com". The potential issues I foresee is an infinite loop due to two onLoad queries (one for SRC, another for HEIGHT) in the parent and child objects, which might required a merge into a single script. As you can tell, I have an idea of what needs to be done but not a clue on how to get it done. Any help would be greatly appreciated. Thanks, recently i noticed that all of my embedded JavaScript code and external style sheets are being shown IN "view source." this happens in all browsers ( IE, FF, Chrome, and Safari [windows]) ... oddly enough it only happens when viewing on my vista or win2k3 machines. is this something added to these OS's or the result of an installed program? has anyone seen this before? Very new to Javascript (been a HTML/CSS guy for a while, but never really got into more than tinkering with other other people's Javascript coding), but I came across a situation I can't find canned coding for, and trying to create it from bits and pieces I Googled has led me to a dead-end. In summary, I have a website that I frequently visit (FWIW, Firefox 3.x is my browser of choice) with many image sources referring to URLs that end with "-thumbnail.jpg". However, for better image quality, I am trying to use Greasemonkey to replace all instances of "-thumbnail.jpg" in the source of images on this site with "-bigthumbnail.jpg". The closest I could think of was to somehow use getElementsByTagName and innerHTML.replace, but realized that innerHTML does not do HTML, only content. Below is as far as I tried to get on my own, I appreciate any assistance from the folks here to help a JS novice like myself, thanks! Code: (function() { var as,ae; as = document.getElementsByTagName("img"); for (var i = 0; i < as.length; i++) { ae = as[i]; ae.innerHTML = ae.innerHTML.replace(/-thumbnail/gi, "-bigthumbnail"); } })(); Hi All, i know how to create a dynamic form or DIv ..but what i do not know is how to create a dynamic form/ or div into a previous dynamic one.. i need basically to see 5 dynamic forms / DIV in cascade where each one trigger the one coming after.. For what i need that : i have my user inserting information on the level 1. let say Copagny info 2- then he will be asked if he wants to add a sub level information ( subform) for that compagny or even many subforms at the same level .. and so on... 3- those sub level ( subforms ) can also call their respective subforms.. Any idea how to design this ? thanks Is there a way to resize an iframe dynamically so that you never get the scroll bar and essentially hide that there is an iframe? Better integration really. Basically I want to iframe a forum into my site so that the design down the sides and top which my friend does using iweb are not messed with. We have a central area which can be longer or shorter depending on the forum. Hi there everybody, I've got this problem which I can't solve myself... I've got a website which has 3 colums and is hosted on domain1.com. in the right column I've got an Iframe which loads content from domain2.com . this content are some textboxes and a datepicker tool. if I press the 'search'-button in this Iframe I would like to refresh the mainpage (from domain1.com) so that another Iframe appears in the middle column. in this column i would like to load a new form from domain2.com which contains the values that I've put in in the form from the right Iframe. Unfortunally I can't get this to work... Will somebody please help me? Hi all, I hope you can help I have some code which: 1) Opens a URL (e.g. google.com) in a hidden iframe, then 2) Redirects the visitor to a different URL (e.g. yahoo.com) after it has loaded... This works exactly as I need. What I'd like to do is the following: 1) Open a URL (e.g. google.com) in a hidden iframe, then 2) Redirect the visitor to a different URL (e.g. yahoo.com) in a full-screen iframe 3) The address bar of the full-screen iframe should be my domain (obviously!) Here's what I have so far... Hidden iframe -> New URL Code: Code: <html> <body> <script type="text/javascript"> var page_body = document.getElementsByTagName('body'); var myframe = document.createElement('iframe'); var id = Math.random(); myframe.setAttribute('id', 'myFrame'+id); myframe.src = 'http://google.com'; //First open Google in hidden iframe myframe.setAttribute('frameborder', '0') myframe.setAttribute('width', '0'); myframe.setAttribute('height', '0'); if (myframe.attachEvent) { myframe.attachEvent('onload', function() { top.location = 'http://yahoo.com'; //Once loaded redirect to Yahoo -- but the address bar shows yahoo.com -- I want the address bar to display mydomain.com/page.html }); } else if (myframe.addEventListener) { myframe.addEventListener('load', function() { top.location = ('http://yahoo.com'); }, false); } page_body[0].appendChild(myframe); </script> </body> </html> I have an example of some code which displays the full screen iframe, but my problem is... ...I can't figure out how to redirect to this after the hidden iframe has loaded Here's an example of how I want the redirect to display -- after the initial hidden iframe has loaded: Code: <html> <head> <script type="text/javascript"> function sendParams() { document.body.style.overflow = "hidden"; } </script> </head> <body> <!--Open Yahoo.com in a full screen iframe, and disable extra scrollbar --> <iframe height="100%" width="100%" frameBorder="no" onload="sendParams()" src="http://yahoo.com"></iframe> </body> </html> I've been beating my head against the wall today trying to figure this out, and I'm fresh out of ideas. If you can help, you'll have some serious gratitude and good karma thrown your way! Best wishes, and thanks in advance, Paul I have made a script where you can add extra fields, and next to the row is a span that automatically displays the outcome from a calculation of three fields in that row. i.e. Q x (B - A) = total. Here is the bit that does the calculation: Code: function advCalc(selected) { var result = Number(document.formmain.elements["quantity"+selected].value) * (Number(document.formmain.elements["provideamount"+selected].value) - Number(document.formmain.elements["supplyamount"+selected].value)) ; result = result.toFixed(2) ; result = addCommas(result) ; document.getElementById("total"+selected).innerHTML = result ; } The bit that adds a new row of fields is: Code: function addPart(divName){ var newdiv = document.createElement('div') ; newdiv.setAttribute('id', 'partrow' + counter) ; newdiv.setAttribute('style', 'clear:both;') ; newdiv.innerHTML = "<div style='float:left;width:40px;text-align:center;margin:5px 5px 0px 0px;'>\r<input onkeyup=\"advCalc('" + counter + "')\" id=' quantity " + counter + "' type='text' value='1' size='1'/>\r</div>\r<div style='float:left;width:100px;text-align:left;margin:5px 0px 0px 0px;'>\r<input id='manufacturer" + counter + "'type='text' value='' size='9'/>\r</div>\r<div style='float:left;width:95px;text-align:left;margin:5px 5px 0px 0px;'>\r<input id='partnumber" + counter + "'type='text' value='' size='9'/>\r</div>\r<div style='float:left;width:80px;text-align:left;margin:5px 5px 0px 0px;'>\r<input id='supplier" + counter + "'type='text' value='' size='4'/>\r</div>\r<div style='float:left;width:100px;text-align:left;margin:5px 5px 0px 0px;'>\r<input id='type" + counter + "'type='text' value='' size='6'/>\r</div>\r<div style='float:left;width:85px;text-align:left;margin:5px 5px 0px 0px;'>\r<input id='deliverytime" + counter + "'type='text' value='' size='13'/>\r</div>\r<div style='float:left;width:40px;text-align:left;margin:5px 0px 0px 45px;'>\r<select id='supplyCurrency" + counter + "'>\r<option value='pound' selected='selected'>£</option><option value='dol'>$</option><option value='euro'>€</option></select>\r</div>\r<div style='float:left;width:15px;text-align:left;margin:5px 5px 0px 0px;'>\r<input onkeyup=\"advCalc(\'" + counter + "\')\" id=' supplyamount " + counter + "'type='text' value='' size='3'/>\r</div>\r<div style='float:left;width:40px;text-align:left;margin:5px 0px 0px 45px;'>\r<select name='provideCurrency" + counter + "'><option value='pound' selected='selected'>£</option><option value='dol'>$</option><option value='euro'>€</option></select>\r</div>\r<div style='float:left;width:15px;text-align:left;margin:5px 5px 0px 0px;'>\r<input onkeyup=\"advCalc(\'" + counter + "\') id=' provideamount " + counter + "' type='text' value='' size='3'/>\r</div>\r<div style='float:left;width:20px;text-align:left;margin:5px 0px 0px 45px;'>\r<strong>£</strong>\r</div>\r<div style='float:left;width:40px;text-align:left;margin:5px 5px 0px 0px;'><span id=' total " + counter + "'></span></div> \r" ; document.getElementById(divName).appendChild(newdiv) ; counter++ ; } The problem I am having is that it works fine for the first row which is hardcoded as e.g. id="provideamount0" etc. It isn't working for any other fields added but I can't see what is wrong I have used iframes for my site and found various javascripts so when a person clicks on say the audio page he http://www.krillmeed.com/index.html it takes them to the audio page but will load it into the index.html page. The problem is, especially with search engines, to point to that page, this is what the URL looks like to send someone to that page: http://www.krillmeed.com/?frame=0&sr...m%2Faudio.html which is not very clean at all, this is the javascript that i found that at least works: Child iframe script: Code: <script type="text/javascript"> (function(){ var qstr = '?frame=0&src=' + encodeURIComponent(location.href), lre = new RegExp('^' + location.protocol + '//' + location.hostname + '(()|(/)|(/index.html)|(/index.php))(()|(\\' + qstr + '))$'); if (!lre.test(parent.location.href)){ top.location.href = '/' + qstr; } })(); </script> Parent iframe Script: Code: <script type="text/javascript"> (function(){ function getQval(n) { if(typeof n !== 'string'){ return null; } var r = new RegExp('[?&;]' + n + '=([^&;#]*)'), m = location.search; return (m = r.exec(m))? unescape(m[1]) : null; } var f = getQval('frame'), s = getQval('src'); if(f && frames[f] && s && s.indexOf(location.protocol + '//' + location.hostname + '/') === 0){ frames[f].location.href = s; } })(); </script> Is there a "cleaner" way of doing this? This was an old code, i have yet to find a more modern one. Thank you in advance. |