|
JavaScript - Link To Iframe From Another Page
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. Similar TutorialsHi, 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. Hello folks! I don't know anything about JavaScript but I found a really cool snippet I use a lot. It will randomize images and each image can open a new link. It looks like this: ---------------------------------------------------- <script language="JavaScript" type="text/javascript"> function random_imglink(){ var myimages=new Array() myimages[1]="/img/images1.jpg" myimages[2]="/img/images2.jpg" myimages[3]="/img/images3.jpg" var imagelinks=new Array() imagelinks[1]="http://www.google.com" imagelinks[2]="http://www.yahoo.com" imagelinks[3]="http://www.alexa.com" var ry=Math.floor(Math.random()*myimages.length) if (ry==0) ry=1 document.write('<a href='+'"'+imagelinks[ry]+'"'+'><img src="'+myimages[ry]+'" border=0></a>') } random_imglink() //--> </script> ------------------------------------------------- Now, my question is, can I link to open a document within an iFrame on my page? Please don't tell me not to use iframes or whatever, I'm not a professional, just want to see if this works. Alright straight to the point I have a link on the parent page of my site. <a href="javascript: scontrols.expandit(0)">View Info</a> I would like to be able to some how call that from the iframe. I am just getting into java script and haven't been able to figure it out. thank you for any help you can provide. Hi all, Very new to this but I am trying to automate some webdownloads I need to do daily. I have a link I am trying to click via applescript do javascript I can return the frames html by doing tell application "Safari" do JavaScript "document.getElementById('iframesearch').contentDocument.getElementById('frmAccountList').innerH TML" in document 1 end tell the html returned contains the link link I want to click/fire <span id="SWGrdAccSearch_ctl06_lblAsterix"> </span> <a onclick="javascript:return getDefaultAccount('John Doe','0890','0','0');" id="SWGrdAccSearch_ctl06_lnkAccount" href="javascript:__doPostBack('SWGrdAccSearch $ctl06$lnkAccount','')">123456</a> how can I get his link to launch/fire? Any and all help deeply appreciated. I have two pages A and B. I have a link in the page A. I have two iframes in the page B. In practice, the link in the page A must open the page B and the link's href must open in the second iframe of the page B. Is there any script that does this? Hello, I want add an onclick link from an iFrame to a form field on the parent. After to ba placed on the form field, clicking on the link a new page will be open on the iframe. I am trying this: Quote: <form name=formName> <iframe name=frameName src="<a href=http://www.google.com onclick="parent.document.forms['formName'].elements['fieldName'].value = 'do you right';" return false;">Click Here To Get Done Right</a> " width="800" height="400" ></iframe><br><br> <input type="text" id="fieldname" size="95" name="t2"> </form> letchev I just cannot get the html to load for each linked button to the Iframe. If I remove the "onclick" command for the backround images, the links load to the Iframe. If I leave the "onclick" command in there only the background changes. So, I would assume there is a conflicting issue with loading the "a href" and the "onclick" commands together. Maybe I need to know how to do multiple "onclick" commands...suggestions? Code: <?xml version="1.0" encoding="UTF-8"?>
<!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>
<title>Welcome to Whitetail Fantasies</title>
<link href="layout.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body {
font-family:Tahoma, Geneva, sans-serif;
background-color: #000;
}
#background {
position:absolute;
float:left;
width:1024px;
height:768px;
background-image:url(wf_layout/wf_bkgnd-1.jpg);
z-index:0;
}
</style>
<script type="text/javascript">
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>
<body onload="MM_preloadImages('wf_layout/buttons/home_inv.png','wf_layout/buttons/aboutus_inv.png','wf_layout/buttons/trophies_inv.png','wf_layout/buttons/trailcams_inv.png','wf_layout/buttons/calendar_inv.png','wf_layout/buttons/contact_inv.png')">
<div id="background"></div>
<div id="outer">
<div id="header"></div>
<div id="wrapper">
<div id="left_side"><br /><br /><br /><br /><br /><br /><br />
<table width="140" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><a href="wf_home.html" target="_IFrame" onclick="document.getElementById('background').style.backgroundImage='url(wf_layout/wf_bkgnd-1.jpg)'; return false;" onmouseover="MM_swapImage('btn_home','','url(wf_layout/buttons/home_inv.png)',1)" onmouseout="MM_swapImgRestore()"><img src="wf_layout/buttons/home.png" alt="Home button" name="btn_home" width="140" height="42" border="0" id="btn_home" /></a></td>
</tr>
<tr>
<td><a href="wf_aboutus.html" target="_IFrame" onclick="document.getElementById('background').style.backgroundImage='url(wf_layout/wf_bkgnd-2.jpg)'; return false;" onmouseover="MM_swapImage('btn_aboutut','','wf_layout/buttons/aboutus_inv.png',1)" onmouseout="MM_swapImgRestore()"><img src="wf_layout/buttons/aboutus.png" alt="About Us Button" name="btn_aboutut" width="140" height="42" border="0" id="btn_aboutut" /></a></td>
</tr>
<tr>
<td><a href="wf_trophies.html" target="_IFrame" onclick="document.getElementById('background').style.backgroundImage='url(wf_layout/wf_bkgnd-3.jpg)'; return false;" onmouseover="MM_swapImage('btn_trophies','','wf_layout/buttons/trophies_inv.png',1)" onmouseout="MM_swapImgRestore()"><img src="wf_layout/buttons/trophies.png" alt="Trophies button" name="btn_trophies" width="140" height="42" border="0" id="btn_trophies" /></a></td>
</tr>
<tr>
<td><a href="wf_trailcams.html" target="_IFrame" onclick="document.getElementById('background').style.backgroundImage='url(wf_layout/wf_bkgnd-4.jpg)'; return false;" onmouseover="MM_swapImage('btn_trailcams','','wf_layout/buttons/trailcams_inv.png',1)" onmouseout="MM_swapImgRestore()"><img src="wf_layout/buttons/trailcams.png" alt="Trial Cams Button" name="btn_trailcams" width="140" height="42" border="0" id="btn_trailcams" /></a></td>
</tr>
<tr>
<td><a href="wf_prices.html" target="_IFrame" onclick="document.getElementById('background').style.backgroundImage='url(wf_layout/wf_bkgnd-5.jpg)'; return false;" onmouseover="MM_swapImage('btn_prices','','wf_layout/buttons/calendar_inv.png',1)" onmouseout="MM_swapImgRestore()"><img src="wf_layout/buttons/calendar.png" alt="Prices button" name="btn_prices" width="140" height="42" border="0" id="btn_prices" /></a></td>
</tr>
<tr>
<td height="41" align="center" valign="middle"><a href="wf_contact.html" target="_IFrame" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('btn_contact','','wf_layout/buttons/contact_inv.png',1)" onclick="document.getElementById('background').style.backgroundImage='url(wf_layout/wf_bkgnd-6.jpg)'; return false;"><img src="wf_layout/buttons/contact.png" alt="contact button" name="btn_contact" width="137" height="41" border="0" id="btn_contact" /></a></td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td align="center"><img src="mdclogo.png" alt="mdc_logo" width="120" height="106" border="0" usemap="#Map" /></td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</div>
<div id="content_area">
<br /><br /><br />
<iframe name="_IFrame" style="width:800px; height:500px;" src="wf_home.html" frameborder="0" allowtransparency="true"></iframe>
</div>
iu
</div>
</div>
<div id="footer"></div>
<map name="Map" id="Map">
<area shape="poly" coords="0,100" href="#" />
<area shape="poly" coords="58,1,119,97,1,99" href="http://mdc.mo.gov/hunt/" target="_blank" />
</map>
</body>
</html>
Hello codingforums, There are various widgets and plugins that show link preview via tooltip or iframe, So as I am trying to continuously improve web sites experience with new trends and web functionalities - thus it come the task for uniform link preview via div and iframe. This is the script that use attribute id's but for the complete solution it would be required to display link within event 'this' or something -any suggestions and help are very appreciated. Thanks Code: <script type="text/javascript">
function toggleDiv(divid){
var div = document.getElementById(divid);
div.style.display = div.style.display == 'block' ? 'none' : 'block';
}
</script>
<div class="toggle"><a href="javascript:toggleDiv('panel1');" >Toggle
Panel 1</a></div>
<div id="panel1" class="panel">
<h2>Panel 1</h2>
This panel contains text
</div>
<div class="toggle"><a href="javascript:toggleDiv('panel2');" >Toggle
Panel 2</a></div>
<div id="panel2" class="panel" style="display:block;">
<h2>Panel 2</h2>
This panel contains external url content
<iframe src="http://" width="100%" heigth="500"></iframe>
</div>
<div id="panel1" class="panel"> <h2>Panel 1</h2> This panel starts closed because style='display:none' is defined in the style section of the head </div> <div class="toggle"><a href="javascript:toggleDiv('panel2');" >Toggle Panel 2</a></div> <div id="panel2" class="panel" style="display:block;"> <h2>Panel 1</h2> This panel starts open because of style='display:block' </div> <a href="javascript:toggleDiv('panel1');" >Another Link to Toggle Panel 1</a> [/CODE] Ok, I paid to have a website built, yet the developer used iFrames to accomplish the task. Basically, load a parent page, and then in an iframe, lod content chosen from a menu. Is there a way to create a menu at the homepage level, that will allow a menu listing the various parent pages, and under each parent page, have a drop down that will point directly at an iframe content? Like this? Page1 Page2 Page3 Page1ContentA Page1ContentB Page1ContentC And when you click Page1ContentC, it will load Page1.htm and in the iframe load Page1ContentC? If i am not clear, please let me know. Any help appreciated. Jeff 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 guys, I've been breaking my brains for few hours, I already searched online and I found nothing so far. What I wanna do.... I have 5 different images linked to 5 different websites. Once the image is clicked, the first link will be displayed in an iframe, and the image will change to the second one. Once we click on the second image, the second link will be displayed using the same iframe, and so on. The code changes the images,but I dunno how to deal with the link to the websites. This is the code: Code: <html>
<head>
<title>Testing...</title>
</head>
<script type="text/javascript">
imgs=Array("1.png","2.png","3.png","4.png","5.png");
links=Array("www.vbct.ca","www.cnn.com","www.castanet.net","www.yahoo.com","www.cubaweb.cu");
var x=0;
function change() {
document.getElementById("changes").src=imgs[++x];
if (x==4) {
x=-1;
}
}
if (!imgs[x+1]) {
x=-1;
}
</script>
<body>
<div>
<iframe src="http://www.vbct.ca" style="border: 0; position:relative; top:0; left:0; right:0; bottom:0; width:100%; height:400px;" name="page" width="100%"></iframe>
</div>
<br /><br />
<div>
<a href="#" target="page"><img src="1.png" id="changes" alt="alttext" onmousedown="change()" style="cursor: pointer;" /></a>
</div>
</body>
</html>
And this is the link to the test page: http://www.virtualbc.ca/sites/test/ 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. 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 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. 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. 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? 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? ... 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.
|
|||||||