|
JavaScript - Iframe Call To Dynamic Pages
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>
Similar TutorialsAlright 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. First post so please be gentle. My sites has a menu on the home page linking to a dozen other pages. My intention is to open those items into a main iframe also on the home page. I have put the <base target="iframe" > in the <Head> area and all seems to work in Opera but Internet Explorer and Firefox will both open new windows instead of loading into the iframe. Having said that. Links from WITHIN the iframe will open correctly in all browsers. Ideas in newbie-speak very much appreciated Regards, Phil I'm slowly scraping away errors from a page im working on and ive found this forum to be very helpful- down to one more that i wanted to post on. sample page is he http://darrenlasso.com/freelance/loo.../lookbook.html Works fine in most all browsers except for IE8- ive even had to include built in ie7 compatibility to get it to work at all. Problem is most likely associated with my js, which is: Code: function ShowPage(frame)
{
frames[0].location = frame+'.html'
}
and html is: Code: <div id="thumb1"><a onmouseover="ShowPage('frame1')"onclick="ShowPage('frame1')" rel="nofollow" target="mainbox"></a></div>
<div id="thumb2"><a onmouseover="ShowPage('frame2')"onclick="ShowPage('frame2')" rel="nofollow" target="mainbox"></a></div>
<div id="thumb3"><a onmouseover="ShowPage('frame3')"onclick="ShowPage('frame3')" rel="nofollow" target="mainbox"></a></div>
etc etc.. Which is just something i found online - probly isnt right for what im trying to accomplish. If you go to the site- you navigate by hovering over/clicking the images at the top and that loads a new page into the iframe below. Id like to be able to fix the errors and get it working without having to force ie7 compatibility if possible too. Any help is much appreciated 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 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. 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> 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, Hi, I am hoping I just need to be pointed in the right direction with this. I have Page1. When Page1 body onloads it uses Ajax to call PartA Within PartA I have a message board so members can write messages which will be sent to my database in PartA[1] and immediately posted for view on to PartA[2]. As I want to have my request to the server updating regularly I want to have PartA[2] on a timed loop to refresh - I do not need the content of PartA[1] to refresh. So the order of events would look like this: Page1 | onload call | v PartA / \ V V PartA[1] PartA[2] (loads once) (constantly refreshes) What I am not sure about is that I have <body> and <head> attributes in Page1 only. I have already used my body onload to call PartA (and can't use it to call PartA[2] before PartA has loaded anyway). I do not want the user to have to click a button or do anything to call up PartA[2]. So my question is how would I get PartA[2] to automatically load within PartA? I hope I have made this clear, but if I haven't let me know and I will try again. Hi, I coded the following JavaScript: Code: var el = document.createElement("iframe");
el.setAttribute('id', 'ifrm');
document.body.appendChild(el);
el.setAttribute('height', 250);
el.setAttribute('width', 300);
el.setAttribute('frameborder', 0);
el.setAttribute('marginheight', 0);
el.setAttribute('marginwidth', 0)
el.setAttribute('src', 'http://example.com/?pub=1&format=image&size=300x250&url='+window.location);
And am putting it between <script type="text/javascript"> and </script> tags in the <body> section of my site. But, it only works in certain areas of the page. Can you guys think of any reason for this? Let me know... Thanks, ~Christian 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 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 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? 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. 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. 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. Hello to all and thanks in advance for my help. I know this has been posted in different places on the web but I have found no solid solution. Here is my problem: I have an iframe the loads up a page on a remote server (out of my hands) and when I send certain information to it, the page redirects my entire site to their 404 page. I need to prevent this from happening so I engaged in much research and found this... temporary fix: Code: <script>
// No redirection!
var prevent_bust = 0
window.onbeforeunload = function() { prevent_bust++ }
setInterval(function() {
if (prevent_bust > 0) {
prevent_bust -= 2
window.top.location = 'http://www.mysite.com/my404.html'
}
}, 1)
</script>
What this code does, is that every time the unload of a page happens, it will redirect me to my404.html and this does solve the problem of the iframe trying to redirect my entire site but anytime a user tried to go to a new website by typing it in the address bar, they are redirected to my404.html. Is there another solution for me so that the page within the iframe cannot redirect the parent page? I have an iframe that is a specific height and width. I want to detect whenever the the iframe is no longer exactly the height i set it to. If a user has CSS turned off for example the iframe will be in default height and width. I want to detect that. This is how you'd normally do it but this only returns the original size (try with 'no style' in Firefox): Code: function getSize()
{
alert('height is now '+document.getElementById("Iframemain").height)
alert('height is now '+document.getElementById("Iframemain").width)
}
Is it possible? Hi I have a page with 3 iFrames, showing different content. iFrame1: Here is a navigation php page. Click on a menu item and it loads a php page in iFrame2 iFrame2: Here is a list of items from a database. iFrame3: I load 3 different php pages here. (A) is the main showing page. (B) and (C) is a record manipulation page, that does some editing in the database and then redirects to (A). When the (A) php page loads, it should reload iFrame2 I have tried to put something like: <body onLoad=parent.location.reload()> and put it on the (A) php page. This will reload the entire page, which works. However, it results in a loop of reloads, as the (A) iFrame file will load with the entire page reload... So, I was looking for the right code to put, like onLoad=iFrame2.location.reload() However, I can't seem to find the correct code, so I hope any of you can help me... |
|||||||