|
JavaScript - Linking Into An Iframe On Another Page
I have a simple script that will get the NWS forecast for any zip code and it opens it in a new tab. I would like it to open in an iframe on another page with in my website. I have come close, but not quite all the way yet. This will enter the forecast in an iframe on the same page as the input form.
http://www.cavecountryweather.com/wxsearch.php How can it load onto this page from the form on the menubar? This menu is common on all the sites pages. I have seen solutions posted around the internet using javascript for similar issues, but I haven't been able to get any to work in my situation. My javascript skills are - none. Any help would be appreciated. Similar Tutorialsi have been looking all over the web and i can't get to where i need to be to finish my page. basically i have two pages and if someone clicks a specific link from the first page i want it go to the other page but load a specific page in the iframe on the second page. i know how to use javascript to make a specific page load into an iframe but not how to make the page load into the iframe on another page. all i need to know is how to do it for one page then i think i can build the decision structure around it to make it work for more than one link (hopefully). any help will be greatly appreciated. thanks. Hey, I have 3 bits of code, 2 of which I'm pretty sure are right [i know the php works, and the ajax looks fine], but one i'm having trouble with. Basically what I'm trying to do is use a link to call php function [calls a piece of text from a database]. Which worked fine. But then I tried to incorporate AJAX into the script to make change dynamically on the page, and I'm a little confused with it all. I've got the AJAX and PHP, [and an attempted page with a link on to try and call the function with AJAX] but so far it's not doing as it should. Wondered if anyone could show me where I'm going wrong with the whole 'linking together' thing? So far everything I've tried hasn't worked. [hope this doesn't violate the forums 'don't dump your code' rule. But it's kind of all necessary] The AJAX [AJAX.js]: Code: function loadurl(generate.php) {
var ajax = false;
// Create the object:
// Choose the objecttype, depending on what is supported:
if (window.XMLHttpRequest) {
// IE 7, Mozilla, Safari, Firefox, Opera, most browsers:
ajax = new XMLHttpRequest();
} else if (window.ActiveXObject) { // Old IE-browsers
// Make the type Msxml2.XMLHTTP, if possible:
try {
ajax = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e1) { // Else use the other type:
try {
ajax = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e2) { }
}
}
// Retrieving the data from the page
if (ajax) {
alert("url:generate.php" + url);
ajax.open('GET', url);
// Sends request
ajax.send(null);
// Function that handles response
ajax.onreadystatechange=function(){
// If everything is OK:
if ( (ajax.readyState == 4) && (ajax.status == 200) ) {
// Returns the value to the document
alert(ajax.responseText);
}
}
} else { // AJAX is not useable
alert('It is not possible to connect, please update your browser.');
}
}
The PHP [generate.php] Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
</head>
<body>
<?php
if($_GET['act'] == "generate_quotes") {
$db = mysql_connect("*", "*", "*") or die ("Unable to connect to database.");
mysql_select_db("quote") or die ("Unable to select database.");
$result = mysql_query( " SELECT * FROM `quote` ORDER BY RAND() LIMIT 0,1 " );
$fetch = mysql_fetch_array($result);
echo "<blockquote>".$fetch['q_quote']."</blockquote>";
mysql_close($db);
} else {
echo "<img src=\"1.png\">";
}
?>
</body>
</html>
The page where I'm trying to bring them together [PULL.php] Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<script src="ajax.js" type="text/javascript"></script>
</head>
<body>
<a onClick="loadurl('generate.php'); return false;">Click Here</a>
</body>
</html>
I've included the file names with extensions just in case it's something to do with those, but thanks in advance for any help. Greatly appreciated. I've searched everywhere for help on how to do this... I have a website for tanning salon services. Salon A's page has links for 4 possible equipment choices -[I] (diamond, platinum, gold, bronze levels) on the Sunbeds page. Sunbeds page has 2 iFrames, top and bottom, that are changed by 4 functions - changediamond(), changebronze(), etc. based on the selection. I need to be able to click a link on the Salon page that will take me to the corresponding function on the Sunbeds page... Here's what I have so far: Salon A page Code: <a href="sunbeds.htm?javascript:changediamond()"><img src="images/nr_diam_sm2.jpg" alt="Diamond Level Sunbeds" /></a>
(thru)
<a href="sunbeds.htm?javascript:changebronze()"><img src="images/nr_brnz_sm2.jpg" alt="Bronze Level Sunbeds" /></a>
Sunbeds page Code: <SCRIPT language="JavaScript">
function changediamond()
{
parent.FRAME1.location="sb_top_ct1.htm";
parent.FRAME2.location="sb_bot_ct1.htm";
}
(thru)
function changebronze()
{
parent.FRAME1.location="sb_top_ct4.htm";
parent.FRAME2.location="sb_bot_ct4.htm";
}
</script>
.
..
...
..
.
<a href="javascript:changediamond()"><img src="images/diamond_sm2.jpg" alt="Diamond Level Sunbeds" /></a>
(thru)
<a href="javascript:changebronze()"><img src="images/bronze_sm2.jpg" alt="Bronze Level Sunbeds" /></a>
The links take me to the correct page but not the function. Once I'm there I can select the functions and the iFrame change works great. I'm just at a loss for passing along the data string ie sunbeds.htm?javascript"changediamond() I would certainly appreciate any help and advice you could share. I'm sure it's pretty simple but for a JS newbie, it's frustrating! hello i've followed this javascript and i'd like to link the text to one of my page.How do i place the ahref tag in the script.Appreciate your help http://www.javascriptkit.com/script/script2/neontext.shtml . . . .Within my website (so I control all pages) I often make anchor-links from one page (call it currentpage.htm) to an anchor-link in another page (newpage.htm). Imagine that newpage.htm has two anchor-locations, one near the page-beginning (#high) and one near the page-end (#low). . . . .There is a problem when linking to newpage.htm#low (or an inside-the-page link to #low) because the page-end goes to the bottom of the browser window, and the location (#low) appears somewhere in the vertical middle of the browser window, so it's difficult for a user to know where they should begin reading, and they get confused. . . . .A low-tech solution is to "make the page longer" by adding space to the page-bottom with a series of <p> </p>, or with a tall blank spacer-gif. But this implies something false, it tricks a user into thinking the page is longer than it is, so they may think "this page is too long, I don't want to read that much" and they go away, or they "skim" when they could read more slowly. . . . .Is there a solution using javascript? . . . .If yes, I assume the javascript must be located within newpage.htm, because a command within currentpage.htm can't "tell another page" what to do. Is this correct? I'm not confident because I'm a novice with using javascript. . . . .So is there a way to say, within newpage.htm, "make the page longer by adding a blank spacer-gif to the page-end when an incoming link goes to newpage.htm#low" but to have this be temporary, so when newpage.htm is opened the next time normally (with a link to newpage.htm or to newpage.htm#high) the spacer-gif is gone? CraigR Hi, Not sure if I worded that question right. I have a web page which will display another web page in an iframe. But the content inside the iframe may change while the user interacts with it so I need to be able to resize the iframe height from code on the page inside the iframe. Any tips on how I can do that? I am using php and javascript. Thanks. Hi guys, I need to redirect a page to another url when it detects that the page is opened inside an iframe. I need help with this <script > if(location.href != top.location.href){ window.location = 'http://myurl.com' } </script> - check my attachment index.zip Thx. Hi All, I am not sure if this is the right place for this question. I'm fairly certain that my problem can be resolved with some JS, but I'm not 100% so please forgive me if this thread does not belong here. Anyhoo, here goes.... I have a site i'm building in Joomla! 1.5. I've got a form on page A and an iframe on page B. The iframe src is an asp page that returns real estate listing details based on values passed to the asp page in the URL. for example: http://www.hostOfAspPage.com/aspPage...&minprice=500k I figured out how to create a form on page B that changes the src of the iframe by setting the target to the name of the iframe. so that works fine. but now, i want to put a similar form on the home page. Please see the following diagram...hopefully it explains what i'm trying to do. http://webwraps.com/changeiframesrc.jpg so here is my question... Is it possible to use JS (or maybe php?) to create a URL based on the values in the form on page A and then take the visitor to page B while changing the src of the iframe on page B to be the newly created URL? if so, how? existing iframe code: <iframe name="resultsiframe" src="URL-ONE"></iframe> desired new iframe code (after form on page A is submitted): <iframe name="resultsiframe" src="URL-TWO"></iframe> Thank you very much for your time. Hey, I've searched around on other forums for an answer to this but I still haven't come across an answer that works. What I want to do is go from page1 (which does not have an Iframe) to page2 (which does have an Iframe) and change the content of that Iframe based on the links clicked on page1. So say I click link1 on page1, I want page2 to show up and for the Iframe to show link1 content. If I click link2 on page1, I want page2 to show up and in the Iframe I want to see link2 content. If there's a javascript code for this that works, I would really appreciate the help. Thanks. I am creating chat application.I have friend list with whom login user can chat.onclick of user name i want to open different div in which i can load my chat page.Can anyone suggest me javascript for this task.
Good day all I have a contact form that opens up in a iframe on my home page. I have a second page with a link for contact and I would like to know If their is a javascript that when I press the contact link on the second page that it can go to the home page and open the iframe for the cntact form. Please note I do not know javascript I am trying to learn it. Thank you Shoutout I have a system on my website that logs users in. Once the user is logged in, I need the popup window that it takes place in to close and the parent window to refresh. This system could go through different pages depending on if the user has even been there before, etc., but the ending page will always be the same. I tried writing my own JavaScript for this, but since I do hardly any work with it, I can't get it to work quite right. Here is what I have, which I believe to be pretty close to what I want the end result to be: Code: <script type="text/javascript">
var iframe = document.getElementById("IFRAME ID").contentWindow.location.href;
var url = "ENDING PAGE URL";
function LoadFrame() {
if (iframe == url) {
window.close();
if (window.opener && !window.opener.closed) {
window.opener.location.reload();
} else {
}
</script>
So I guess that I'm asking what do I need to change/add/fix/get rid of/whatever to make this work? Hi all, I am facing problem in preventing my web page being loaded into an iFrame. I search in internet and found this solution : if (self == top) document.documentElement.style.display = 'block'; else top.location = self.location; The above java script code is simple redirecting me to the home page of my web site. But I donot want that kind of solution. When anybody tried to access my web page through iFrame, it should show an error message like "The content of the web site cannot be loaded into an IFrame". This message should be displayed inside the iFrame. For example, if we tried to access "google.com" site in an iframe, the website should not allow the iframe object to load into it, insted it will display an error message along with a provision to open webiste with an external link with it. Any help? thanks, -Sanath hi there. i have a classic asp page that is using the winhttprequest object to get the contents of website from a different server. Then i modify the html i get to suit my needs.. save it to a file, and then finally, i display this stuff in an IFRAME. (i wrapped a div tag around the iframe so technically, i'm doing something like: "divtabframe.innerHTML = '<IFRAME SRC='myserver/somepage.html'></IFRAME>) My problem is that when i refresh the main page, i want the iframe to also display the latest data. It does get the latest data from the external site and its saved in "somepage.html". But the iframe isn't updated unless i explicitly right-click inside the frame and manually select refresh. I have added a <meta http-equiv="refresh" content="30"> line to make it auto refresh on it's own. But the users find it annoying that the page refreshes while they're reading it. It would be ideal if when they refresh the main page, the iframe gets updated too. or i could create a new button too... as long as both pages are updated i did find this solution on a different website: document.getElementById(FrameID).contentDocument.location.reload(true); My page inside the iframe is ultimately "local" so it sounds like the above code should work, but i'm not sure what event would be best to trigger this javascript... and i still need a way to refresh the main page too. thanks. Hello Everyone!!! I have a question, and any advise or help would be greatly appreciated. I know that ANCHORS situated on a page may be retrieved from another page using the method [a href="faq.html#here"]. How would I retrieve an ANCHOR within an IFRAME from another page. Below are my codes. Thank you all in advance, mbay -- [Help Page] <html><body><head><title>Help</title></head><table><tr><td>Below I will show an example of html. For those of you who don't know what HTML is, click <a href="faq_iframe.html#whatis"> here</a></td></tr><tr><td>Below I will show an example of tables. For those of you who don't know what tables are, click <a href="faq_iframe.html#table"> here</a></td></tr><tr><td>Below I will show an example of a hyperlink. For those of you who don't know what HYPERLINK is, click <a href="faq_iframe.html#hyper"> here</a></td></tr></table></body></html> -- [FAQ] <html><body><head><title>FAQ</title> <script language="javascript"> <!-- Hide the script from old browsers -- function surfto(form) { var myindex=form.dest.selectedIndex var passed = form.dest.options[myindex].value var acomma = passed.indexOf(",") var chars = passed.length var filename = passed.substring(0,acomma) var where = passed.substring(acomma+1,chars) if(filename != "") {window.open(filename, rel="nofollow" target=where)}; } //--> </script> </head><table><tr><td><form name="myform"><select class="pulldown" name="dest" size="1"><option>Select An Option</option><option value="faq_iframe.html#whatis,FAQ">What is HTML</option><option value="faq_iframe.html#table,FAQ">What are tables?</option><option value="faq_iframe.html#hyper,FAQ">What are hyperlinks?</option></select> <input type="button" value="GO!" onclick="surfto(this.form)"></form></td></tr><tr><td><IFRAME SRC="faq_iframe.html" Title="FAQ" SCROLLING="auto" NAME="FAQ" WIDTH="200" HEIGHT="200" ALIGN="center" FRAMEBORDER="no" style="border:15px ridge #0066FF"></IFRAME></td></tr></table></body></html> -- [FAQ IFRAME] <html><body><head><title>FAQ IFRAME</title></head><table><tr><td><font size="7">Welcome to the FAQ SECTION</font></td></tr><tr><td><a name="whatis"><b>What is Html?</b></a></td></tr><tr><td>HTML ( H yper T ext M arkup L anguage) is the language used to write Web pages. You are looking at a Web page right now. </td></tr><tr><td><a name="table"><b>What are tables?</b></a></td></tr><tr><td>Think of your tabular information in light of the coding explained below. A table has heads where you explain what the columns/rows include, rows for information, cells for each item. In the following table, the first column contains the header information, each row explains an HTML table tag, and each cell contains a paired tag or an explanation of the tag's function. </td></tr><tr><td><a name="hyper"><b>What are hyperlinks?</b></a></td></tr><tr><td>Hyperlinks are what connect the world wide web, without them we would get nowhere without knowing the exact URL (Universal Resource Locater) of the document we are looking for. Hyperlinks or more commonly just called "links" can do many things, but they always call for an action. A link could open your email client, it can move you to different pages or it can move you to different spots within the same document. </td></tr></table></body></html> ... but only in $%&/$ IE... you can see the parent page dropdowns when the page loads, but when the iframe loads it appears to overwrite the parent page completely... works fine in Chrome and FF. Here's the page EDIT: sorted. appears I had to clear the floats, or something Is an iframe the only way to embed a web page? I would like to embed a web page within a email but some users email clients do not support iframes.
I am a javascript newbie. I have a radio website that runs a live stream 24/7. The live stream is loaded in to an iframe named "stream". I only ever have 2 files that show in that iframe. 1 for when the user has the stream on and another for when they turn it off. stream_on.php and stream_off.php I also have podcasts on the site and my goal is when the user clicks the .swf object to play the podcast, the live stream in the iframe changes to stream_off.php so that the 2 audios don't overlap each other. Here's the code I have so far for the .swf object. PHP Code: <object type='application/x-shockwave-flash' data='player_mp3_maxi.swf' width='50' height='20' class='blur' onclick="window.open('stream_off.php','stream')\"> <param name='movie' value='player_mp3_maxi.swf' /> <param name='bgcolor' value='#666666'>"; if ($row['location'] == "") { echo "<param name='FlashVars' value='mp3=". $site ."podcasts/". $filename ."&showslider=0&showstop=1&autoload=0&bgcolor1=330066&width=50' />"; } else { echo "<param name='FlashVars' value='mp3=http://". $row['location'] . $filename ."&showslider=0&showstop=1&autoload=0&bgcolor1=330066&width=50' />"; } </object> And the code for the iframe. It's default state is stream_on.php since on load I want the stream to start right away. I only need it to change upon clicking of any .swf object on the page. PHP Code: <iframe src='stream_on.php' id='stream' marginheight='0' width='195' height='110' frameborder='0' scrolling='no'></iframe> As you can see, I put the onclick in the object tag. Is this correct ? Is there a piece of javascript code I am missing ? Please Help. Hi i have the following Code: <script type="text/javascript">
$(document).ready(function () {
window.name = "main";
$("#uploadSubmit").bind("click", function () {
//edit below to suit
var src = "uploader.php";
//end
var results = '<iframe src="' + src + '" name="uploader" id="uploaderIframe"></iframe>';
$("#uploader").append(results);
$("#uploadResult").html('Uploading please wait... <img src="images/loader.gif" />');
$("#uploaderIframe").load(function () {
var iframeHtml = $('#uploaderIframe').contents().find("body").html();
$("#uploadResult").html(iframeHtml);
$("#uploaderIframe").remove();
main.execCommand('Stop');
main.stop();
});
});
});
</script>
works perfectly but the main page keeps loading once the iframe is removed. Any know why and how i can terminate the loading? Hi, i will try to be as brief as possible. I have a page A with form: Code: <form id="search" action="find.html" method="get"> ... (some select options) ... <input type="submit" class="submit" value="search"> this form look up some holiday destination which appears on this page with url: (example) Code: www.domain.com/find.html?destination=italy&price=500 Now, I dont want to display result on this page, but on page B, in iframe. I found a way how to redirect output as a link to properly show in iframe on page B. Page A contains: Code: <a href="pageb.html?http://www.domain.com/find.html?destination=italy&price=500">show on page B</a><br> Page B contains: Code: <script type="text/javascript">
<!--
function loadIframe(){
if (location.search.length > 0){
url = unescape(location.search.substring(1))
window.frames["iframe"].location=url
}
}
onload=loadIframe
//-->
</script>
<iframe src="" name="iframe" id="iframe"</iframe>
In this case page B will properly load requested link in iframe. Problem is it is just a static link... I want to display search result from the form. Thanks a lot for your help... |
|||||||