|
JavaScript - Iframe Help (unsure How To Use Iframes In Javascript)
A few weeks ago, I posted a request for a basic script that I could use to load bible references into the browser depending on the current date (1 reading/week) as part of my Duke of Edinburgh award scheme project - I'm 15 and have started helping out with the local church website as part of my community service for the award. I know the basics of html, and a very little bit of Javascript/C++
When I posted the request, I was very quickly provided with a script that I am very grateful for, from Philip M (I think). We have just decided to attempt to implement the script into the website, and I am struggling a little bit with using Iframes in Javascript. Is there any possibility that somebody could give me a hand? (The test week is currently 49). The code works perfectly aside from the iframe loading. Code: <html>
<head>
<script type = "text/javascript">
function showWeekText() {
var texts = new Array(54); // array index starts at 0 which is unused
texts[1] = "Iframe for Week 1";
texts[2] = "Iframe for Week 2";
texts[3] = "Iframe for Week 3";
texts[4] = "Iframe for Week 4";
texts[5] = "Iframe for Week 5";
//6-48 removed for ease of viewing
texts[49] = <iframe src ="http://mobile.biblegateway.com/passage /index.php?search=matthew%203:1-6&version=NIV" width="90%" height="4 <p>Your browser does not support iframes.</p> </iframe>";
// Iframe i wish to use for week 49 (Iframe works in an empty html page, but unsure how to use in javascript script)
<iframe src ="http://mobile.biblegateway.com/passage/index.php?search=matthew%203:1-6&version=NIV" width="90%" height="4 <p>Your browser does not support iframes.</p> </iframe>";
texts[50] = "Iframe for Week 50";
//texts[51]-[53] removed for easier viewing
Date.prototype.getWeek = function() {
var onejan = new Date(this.getFullYear(),0,1); // month 0 is January
return Math.ceil((((this - onejan) / 86400000) + onejan.getDay()+1)/7);
}
var today = new Date();
var weekno = today.getWeek();
var weektext = texts[weekno];
document.getElementById("myweek").innerHTML = weektext;
}
</script>
</head>
<body onload = "showWeekText()">
<div id = "myweek"></div>
</body>
</html>
Similar TutorialsHello everyone,i will try to exaplain you what i am trying to do: I am building a web site in html5 and right now i am working in drag n drop some images from one iframe to another.Until now everything worked great.Today i connected my first iframe with my database so all the pictures are taken from there.For this reason, in my code, i create several <div>,each one with id>=1. My code for this is the following: Code: echo "<div class=\"drag\" id=\"".$info['id']."\" draggable=\"true\"><img src=\"postImages/".$info['id'].".jpg\" class=\"post\"></div>"; Its in php,but my results from chrome are the following: Code: <div class="drag" id="2" draggable="true"><img src="postImages/2.jpg" class="post"></div><<div class="drag" id="1" draggable="true"><img src="postImages/1.jpg" class="post"></div><div class="drag" id="3" draggable="true"><img src="postImages/3.jpg" class="post"></div><div class="drag" id="4" draggable="true"><img src="postImages/4.jpg" class="post"></div> So,so far i created several <div>s with one class "drag" and different ids starting from 1 until 4. And here start my problems!I have to change my code for the drag and drop functions in javascript in order to create a specific array with objects with id the <div> id.In more details,my code so far: Code: var people = {
Seth : {
blog : "http://google.com",
photo: "postImages/1.jpg"
}
Seth2 : {
blog : "http://google.com",
photo: "postImages/2.jpg"
}
};
What i want is the SECOND iframe to create an array named people,but insead of Seth and Seth2 the objects inside to have ids 1,2,3... from my <div>s from the previous iframe. I am trying so many hours for this one (it is obvious that my javascript skills are not that good..) that i dont know what to do..i would be glad if you could help me! Thanks in advance! Hi... is there a way to create iframes using cookies and javascript ? What i need to do is to have a way to create a cookie on page one, and use the info on page two to create the iframe. Users will see a list of "external links", once they click on a link, they will be redirected to a page that will generate a iframe of the chosen link. My guess is that if there is a way, it must need to use cookies to store the info (url) to get used by the script that will create the iframe on the page that will be used to show all iframes. Any ideas or help with this will be apriciated. Sorry for my poor english. I have a website, the main page of which we'll call Parent_page. Within Parent_page there's an iFrame, the name of which is the_iframe. The default source of the_iframe is a page which is default.html. I want to supply people with a URL that: Step 1) Opens Parent_page displaying a source in the_iframe that is NOT default.html (that different source will be called different.html) Step 2) Then -- and this is the troublesome part -- does a page jump to element #12345 within different.html. I've managed Step 1. Here's the Javascript I'm using in the head of Parent_page to allow for Step 1 to happen: <script type="text/javascript"> function loadframe(){ if(window.location.replace) window.frames.the_iframe.location.replace(get('framepage')); else window.frames.the_iframe.location.href=get('framepage'); } function get(key_str) { var query = window.location.search.substr(1); var pairs = query.split("?"); for(var i = 0; i < pairs.length; i++) { var pair = pairs[i].split("="); if(unescape(pair[0]) == key_str) return unescape(pair[1]); } return null; } if (location.search&&get('framepage')!=null) if ( typeof window.addEventListener != "undefined" ) window.addEventListener( "load", loadframe, false ); else if ( typeof window.attachEvent != "undefined" ) window.attachEvent( "onload", loadframe ); else { if ( window.onload != null ) { var oldOnload = window.onload; window.onload = function ( e ) { oldOnload( e ); loadframe(); }; } else window.onload = loadframe; } </script> ...and here's the URL I use that opens different.html in the_iframe instead of default.html: mywebpage.com/parent_page.html?framepage=/different.html Again, that part works just fine. However, to accomplish Step 2, I thought I could just use: mywebpage.com/parent_page.html?framepage=/different.html#12345 But when I do that, suddenly nothing after the ? in the URL works. How can I make this page jump happen? Please, please dumb down your answers! I know HTML decently enough, but I don't know anything, whatsoever, about Javascript. The JS code above I copied from another website. Thanks! I've been working on a site where the content is displayed in an iframe. The iframe content is on a different domain than the iframe itself. I've already got around the cross-domain problems by creating a file on the parent domain that the iframe content references via another iframe. (which uses parent.parent to skip the permissions issue) That was all fine and pressing back and forward in the browser navigated back and forward in the iframe (at least in FF, not 100% sure about other browsers) Then the client wasn't happy that the url in the browser didn't change and pages couldn't be bookmarked. So I created a solution where the parent.parent.location.href was changed to be domain.com/#/path/to/iframecontent.php so that pages could be bookmarked, that works fine but now back and forward don't work, or more specifically the url changes correctly but the iframe content doesn't go back. Hi, I've created a gallery with multiple slideshows; each of them show/hide when you click on their corresponding link. The first slideshow appears when the page loads, but the others are hidden with a div style. It works great in most browsers, except Internet Explorer . For some reason, IE only shows part of the slideshows; the whole iframe is there, but only a small portion of the photos appear (although the slideshow itself also continue to run fine). I realized that the problem is the div style (style="display:none; ). When I remove it from all the slideshows, then they appear fully instead of partially in Internet Explorer. However, the purpose of hiding them is defeated, as they all show up at once when the page loads. I want to keep them all hidden until you click on their respective link to show them. The page can be viewed he www.raynemakerimages.com/galleries.html Firefox shows how it should display.... Anyway, I'm looking for a relatively easy fix for this....help is appreciated. Thanks. Coding: Code: <script type="text/javascript" language="JavaScript">
<!--
function HideContent(d) {
document.getElementById(d).style.display = "none";
}
function ShowContent(d) {
document.getElementById(d).style.display = "block";
}
function ShowContent(d) {
if(document.getElementById(d).style.display == "none") { document.getElementById(d).style.display = "block"; }
else { document.getElementById(d).style.display = "none"; }
}
//-->
</script>
The hide/show links: Code: <div align="center" class="class1">
<a href="javascript:ShowContent('family'), HideContent('artistic'),HideContent('intimate'),HideContent('maternity'),HideContent('newborns'),HideContent('miscellaneous')" class="style1 style32">
<span class="class1">Family </span></a>
|
<a href="javascript:ShowContent('artistic'), HideContent('family'),HideContent('intimate'),HideContent('maternity'),HideContent('newborns'),HideContent('miscellaneous')" class="style1 style32">
Artistic </a>
|
<a href="javascript:ShowContent('intimate'), HideContent('family'), HideContent('artistic'),HideContent('maternity'),HideContent('newborns'),HideContent('miscellaneous')" class="style1 style32">
Intimate </a>
|
<a href="javascript:ShowContent('maternity'), HideContent('family'), HideContent('artistic'),HideContent('intimate'),HideContent('newborns'),HideContent('miscellaneous')" class="style1 style32">
Maternity </a>
|
<a href="javascript:ShowContent('newborns'), HideContent('family'), HideContent('artistic'),HideContent('intimate'),HideContent('maternity'),HideContent('miscellaneous')" class="style1 style32">Newborns </a>
|
<a href="javascript:ShowContent('miscellaneous'), HideContent('family'), HideContent('artistic'),HideContent('intimate'),HideContent('maternity'),HideContent('newborns')" class="style1 style32">
Miscellaneous</a><a href="javascript:ShowContent('miscellaneous'), HideContent('family'), HideContent('artistic'),HideContent('intimate'),HideContent('maternity'),HideContent('newborns')" class="style1 style32"></a>
</div>
The slideshows: Quote: <table width="960" border="0" align="center" cellpadding="0" cellspacing="0" style="background-image: url(images/bg3.jpg)"> <tr> <td> <div id="family"> <p align="center"><span class="style33">Family Gallery</span><br /><iframe align="center" src="http://www.flickr.com/slideShow/index.gne?group_id=&user_id=57634260@N08&set_id=72157625563240423&tags=Family" frameBorder="0" width="700" height="700" scrolling="no"></iframe><br/></p></div> </td> </tr> <tr> <td> <div id="intimate" style="display:none;"><p align="center"><span class="style33">Intimate Gallery</span><br /><iframe align="center" src="http://www.flickr.com/slideShow/index.gne?group_id=&user_id=57634260@N08&set_id=72157625563795631&tags=Intimate" frameBorder="0" width="700" height="700" scrolling="no"></iframe><br/></p></div> </td> </tr> <tr> <td > <div id="artistic" style="display:none;"><p align="center"><span class="style33">Artistic Gallery</span><br /><iframe align="center" src="http://www.flickr.com/slideShow/index.gne?group_id=&user_id=57634260@N08&set_id=72157625563696337&tags=Artistic" frameBorder="0" width="700" height="700" scrolling="no"></iframe><br/></p></div> </td> </tr> <tr> <td> <div id="maternity" style="display:none;"><p align="center"><span class="style33">Maternity Gallery</span><br /><iframe align="center" src="http://www.flickr.com/slideShow/index.gne?group_id=&user_id=57634260@N08&set_id=72157625563996323&tags=Maternity" frameBorder="0" width="700" height="700" scrolling="no"></iframe><br/></p></div> </td> </tr> <tr> <td> <div id="newborns" style="display:none;"><p align="center"><span class="style33">Newborns Gallery</span><br /><iframe align="center" src="http://www.flickr.com/slideShow/index.gne?group_id=&user_id=57634260@N08&set_id=72157625563996817&tags=Newborns" frameBorder="0" width="700" height="700" scrolling="no"></iframe><br/></p></div> </td> </tr> <tr> <td> <div id="miscellaneous" style="display:none;"><p align="center"><span class="style33">Miscellaneous Gallery</span><br /><iframe align="center" src="http://www.flickr.com/slideShow/index.gne?group_id=&user_id=57634260@N08&set_id=72157625689475348&tags=Miscellaneous" frameBorder="0" width="700" height="700" scrolling="no"></iframe><br/></p></div> </td> </tr> </table> Every time I try to use the notEmpty function with an onClick event, the validation stops working. I also need to implement a pop-up that gives me this information - alert("Your name is"+firstname +lastname", your G.P.A. is "+gpa "your phone number is "+phone); anytime I try to use it as a function with onClick, it interrupts the validation as well. Please help! I'm completely lost. Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!--
Date: 11/12/2014
Filename: validator.html
Supporting files: None
-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Validator</title>
<script type='text/javascript'>
function formValidator(){
// Make quick references to our fields
var firstname = document.getElementById('firstname');
var lastname = document.getElementById('lastname');
var gpa = document.getElementById('gpa');
var phone = document.getElementById('phone');
// Check each input in the order that it appears in the form!
if(isAlphabet(firstname, "Please enter only letters for your first name")){
if(isAlphabet(lastname, "Please enter only letters for your last name")){
if(gpaValidator(gpa, "Please enter a valid G.P.A.")){
if(phoneValidator(phone, "Please put a valid phone number")){
return true;
}
}
}
}
return false;
}
// Functions that check values in input fields!
function notEmpty(elem, helperMsg){
if(elem.value.length == 0){
alert(helperMsg);
elem.focus(); // set the focus to this input
return false;
}
return true;
}
function isAlphabet(elem, helperMsg){
var alphaExp = /^[a-zA-Z]+$/;
if(elem.value.match(alphaExp)){
return true;
}else{
alert(helperMsg);
elem.focus();
return false;
}
}
function gpaValidator(elem, helperMsg){
var alphaExp = /^([0-3](\.\d\d?)?|4(.00?)?)$/;
if(elem.value.match(alphaExp)){
return true;
}else{
alert(helperMsg);
elem.focus();
return false;
}
}
function phoneValidator(elem, helperMsg){
var alphaExp = /\(?(\d{3})\)?[- ]?(\d{3})[- ]?(\d{4})/;
if(elem.value.match(alphaExp)){
return true;
}else{
alert(helperMsg);
elem.focus();
return false;
}
}
</script>
</head>
<body>
<form onsubmit='return formValidator()'>
<fieldset>
<legend>Personal information:</legend><br />
First Name: <input type='text' id='firstname' /><br />
Last Name: <input type='text' id='lastname' /><br />
G.P.A.: <input type='text' id='gpa' /><br />
Phone Number: <input type='text' id='phone' /><br />
<input type='submit' value='Submit' />
</form>
</body>
</html>
Hello, If JavaScript is disabled, does the content in an iframe become un-viewable/ blocked? This is in general, regardless of how safe or trusted the website/ content is. Code: <html> <head> <noscript>Javascript is disabled. Having it enabled provides the greatest functionality.</noscript> </head> <body> <noscript>Javascript is disabled. Having it enabled provides the greatest functionality.</noscript> <iframe src="first.html" width="300" height="300" /> </body> </html> Hello - I need help adding the src in iframe tags. the problem to resolve looks like this: <script type="text/javascript"> /* Display the daily schedule in an inline frame. Daily schedules are stored in the files sunday.htm through saturday.htm. */ document.write("<iframe src ='weekday.htm'></iframe>") </script> Instructions say where weekday is the text string returned by the weekDay() function. I do have weekDay() function but I don't know how to include it into the iframe. Hello I'm having a little trouble. So far I've been able to achieve that when the user clicks on a button, they're be redirected to a random url. (this is from a list of different urls) I can't get it to work so when the user clicks on the button, they're be directed to the url through an iframe and not just loading a new page. I'm awful at explaining things so I donno if you's will understand me! index.html Code: <form name="myForm" id="myForm"> <p> <input type="button" name="myButton" value="url" onclick="rand_link()" /> ................ <iframe id="frame" src="iframe.html" width="100%" frameborder="0" marginheight="0" marginwidth="0"></iframe> ........ url.js Code: function go_to(url) {
window.location=url;
}
function rand_link() {
var a;
a = 1+Math.round(Math.random()*2);
if (a==1) go_to("http://google.com");
if (a==2) go_to("http://ask.com");
}
Thanks! I have a parent web page that uses a include file 'leftbar.html' as the left navigation. The parent page has a iframe and here is the code: Code: <iframe src="google.com" style="width: 100%; height: 500px" scrolling="yes" marginwidth="0" marginheight="0" frameborder="0" vspace="0" hspace="0"></iframe> Here is the code for each naviagation link on the left nav bar: Code: <tr>
<td id="tdIndex" onmouseout="javascript:DoMouseOut(this)" onmouseover="javascript:DoMouseOver(this)"
class="menuDefault" onclick="javascript:NavPage('All_Rooms_Today.html');">All Rooms Overview</td></tr>
I want the onclick="javascript:NavPage to change the iframe which is currently google.com to a specific page. in this example it would all_rooms_today.html. So I need to write the javascript function Navpage that fills the iframe named internal. Thanks I am trying to run javascript within Iframe and its not running. (The bigger pictu The final target is to do a file upload without refreshing the page, and the original code is using the iframe as the target of the form, and the return from the server is a javascript code that should update some status field on the page. However the code return from the server is not running, so I just paste it in the iframe and it is still not running. ) Code: Content-type: text/html\n\n
<html>
<script type="text/javascript">
alert("this is running")
</script>
<iframe id="upload_target" name="upload_target" src="#" style="width:100;height:100;border:0px solid #fff;">
<script type="text/javascript">
alert("this not running")
</script>
</iframe>
</html>
Hello all i am working on a project. i would like to know how to remove the scroll bars , and how to align the captcha/webpage that loads in the iframe. <title>Test Raid Page</title> <script language="JavaScript" type="text/javascript"> <!--Begining of Java Script- function buildiframesA() { var rlink = prompt('Enter Raid ID:',""); var a = document.createElement("iframe"); a.setAttribute("width","330"); a.setAttribute("scrolling=no"); a.setAttribute('******', 'ifrm1'); document.body.appendChild(a); a.setAttribute('src', "http://*****.******/joinraid.php?raidid=" + rlink + "&suid=******&serverid=2"); } </script> Anything with "************" has been removed due to privacy i added this code in a.setAttribute("scrolling=no"); and it disables the whole script but, in dreamweaver shows it is fine, when i load to debug and click group a to load the frame nothing happens, ive tried many ways to disable the scroll bars and cant figure a way out. There is more to the script this is just my test for the iframe, what i have is groups, all accounts are grouped in groups, when a group is clicked, i am prompt with Enter raid ID, i enter the raid ID and the frames for how ever many people in that group load, on those pages that load in the iframe is a raid page with a captcha to join the raid, the captcha shows automatically in the frame but it is not perfectly aligned as i want it to be. I use dreamweaver and can debug in my browser, any help is appericiated, i can also post pictures as to what i am talking about. EDIT: i also forgot to say i am new to javascript, i know html and php very well.. MrGato =D Hi, new to the forum (and Javascript coding). I hope someone can help as this is driving me nuts... I want my website to display the content of another webpage in an iframe. the other webpage extension will change each day (e.g. 'www.example.com/16_02_2012.html' would be today's file to view, 'www.example.com/15_02_2012.html' would have been yesterday's etc.). I have worked out some code to grab today's date and create the web address as a variable. how do i then use that variable in the <iframe src="??"> when someone click a link to "update the iframe"? Here is my code so far... I would really appreciate some help!!! :s <html> <script> function getMonth() { var now = new Date(); var month = now.getMonth(); return month < 10 ? "0" + (month+1) : month+1; } function getDay() { var now = new Date(); var day = now.getDate(); return day < 10 ? "0" + (day) : day; } var month = getMonth(); var day = getDay(); var year=new Date(); var address = "http://www.example.com/" + day + "_" + month + "_" + year.getFullYear() + ".html"; function iFrameWrite(id, url){ document.getElementById(id).src = url; } </script> <iframe id="info" width="800px" height="800px"></iframe><br /> <a href="#" onclick="javascript:iFrameWrite('info', 'address')">Update the Iframe</a> </html> Hello Coding Forums, For the past few days, i have been learning and just surfing the forum board. I have recently ran into a problem and i am in need of help. This is a mixture of HTMl, XML, and JavaScript. For what i know, it seems my problem is a JS problem. I have been looking at this Facebook Fan page: http://www.facebook.com/pages/The-fi...18916928166010 I understand everything in the second page. The problem is i dont understand how in page 1, you are direct to page 2. Can anyone please explain to me how this is working? I am new with javaScript. Trust me, i have looked and i am still learning. This is important to me. -Mygel Hello, I would like to know which statement I should use in order to echo an iframe in JS. Thanks, Ben I am having trouble with javascript code that is inside an iframe. I am trying to simulate the w3School's tryit. I have tried setting the content of the iframe two different ways and got two different results. This is example code for what I want the iframe's content to be <html> <head> <script type="text/javascript"> function coordinates(event) { x=event.screenX; y=event.screenY; alert("X=" x " Y=" y); } </script> </head> <body onmousedown="coordinates(event)"> <p> Click somewhere in the document. An alert box will alert the x and y coordinates of the cursor, relative to the screen. </p> </body> </html> The first way which was successful (but not what i want) is to save the example code as example.html and set the src property of the iframe to that document. Everything works fine including the mouseEvent. The second way displays the example.html in the iframe as it should but it seems to be ignoring the javascript. This is how I set the iframe content: I have the code stored in a database table. I use xmlHTTPRequest to bring grab the code and it is stored in a variable called responseText. Frome here I the following code sets the iframe content. r = document.getElementById("iframe"); Doc = r.contentWindow || r.contentDocument; if(Doc.document){ Doc = Doc.document; Doc.open(); Doc.write(responseText); Doc.close(); alert(Doc.documentElement.innerHTML); } If anyone can can help me understand why the javascript code doesn't work the second way I would greatly appreciate it. hi, Guys can u help me currently iam running clicksor ads on my blog but its decrease page load time and page stuck where javascrip is located can u help me . how can i put this javascript in iframe so that this javascript loads but never stuck the page thanx Regards Fawad Hi All, I have html pages with code like <div> <script type="text/javascript" src="http://myserver2/mysite/addhtm.js"></script> </div> the script adds some html code and random images selected from second server inside an iframe tag in the div tag. I need to examine this added html and image properties in my page using javascript. A search on internet did not help, it says elements inside iframe coming from different domain can not be accessed. Is there any workaround or hack available to access iframe contents from page javascript? Thanks |
|||||||