|
JavaScript - Iframe Overwrites Parent Page
... 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 Similar Tutorialshi 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 all, I have a page which has a form and also one iframe in the same. there is a button on the parent form. when the button is clicked, i am submitting the iframe and parent both. forms are getting submitted. but when i do print_r for iframe values, it is blank below is the code Parent page: Code:
<?
print "<pre>";
print_r($_POST);
print "</pre>";
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!--
function validate(){
document.getElementById('mainform').submit();
window.frames['iframe1'].document.forms[0].submit();
}
//-->
</SCRIPT>
<BODY>
<FORM METHOD=POST ACTION="" name='mainform' id='mainform'>
<TABLE>
<TR>
<TD>Name</TD>
<TD><INPUT TYPE="text" NAME="Name_VC"></TD>
</TR>
<TR>
<TD>Address</TD>
<TD><INPUT TYPE="text" NAME="Address_VC"></TD>
</TR>
<TR>
<TD colspan=2><INPUT TYPE="button" name="proceed" value="Save" onClick="validate();"></TD>
</TR>
</TABLE>
</FORM>
<iframe src="test1.php" id='iframe1'></iframe>
</BODY>
</HTML>
iframe page : test1.php Code: <? print "<pre>"; print_r($POST); print "</pre>"; ?> <form name='mainform2' id='mainform2' method='post' action=''> Roll number : <INPUT TYPE="text" NAME="Rollnum" value=''> Age: <INPUT TYPE="text" NAME="Age_IN" value=''> </form> Please tell me what is my mistake or how can i achieve values of all 4 fields Million thanks 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. 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? Dear Madam/Sir, I would greatly appreciate any help. I am working on this site: http://www.pathology.ubc.ca/Path_UBC...Professor.html. The list of names on the right hand side is conencted to the iframe, left hand side. By clicking on individual name the eprofile is populated in the iframe. Everything works fine but what I would like to add is some kind of extention to the url so we can externaly link directly to each these profiles. Please let me know if this is something that can be done? Many thanks, Debbie Sorry my bad, but im stuck again. I have tried to search in hours, but i cant find the answer. I think you the pro coders will see the code directly. I have an webbpage, and in the middle of it there is an iframe to a php site. So i have used this code, so after some seconds the iframe will send the guest to another page. <meta http-equiv="refresh" traget="_top" content="5 url=http://mypage.com"/> But the thing is that i want the WHOLE page to reload, and go to that page after 5 seconds (we can say). With that code, only the iframe are going to another page. Is it possible to make the whole page send the user after some seconds, to another page and not only the iframe? I'm working on a upload script that uses javascript, and a hidden iframe to upload the files. It all works up until the iframe finishes and needs to send the javascript function call back to the parent page, nothing happens, when it should hide the upload progress bar. I've searched and searched for the awnser, along with trying different alternative to window.top.window, such as window.top, parent, and parent.document and so far nothing has worked, I've even tried the onLoad on the iframe with no success. Parent Page function: Code: function stopUpload(success, ups, file)
{
var result = '';
var uploaded = '0';
if (success == 1)
{
result = '<span class="msg">The file was uploaded successfully!<\/span><br>';
uploaded = uploaded ++;
if (uploaded == document.getElementById('numflowers').value)
{
document.getElementById(finish).style.display = 'block';
}
}
else if (success == 2)
{
result = '<span class="msg">There was an error during file upload! The file has a size of 0<\/span><br> File: <input name="ufile[]" id="ufile[]" type="file" size="30"> <input type="submit" name="submitBtn" value="Upload">';
}
else if (success == 3)
{
result = '<span class="msg"> We only allow .png, .jpg, .gif, .zip, .rar, and .7z files to be uploaded. If you think we should allow other please make a suggestion on the forums.<\/span><br> File: <input name="ufile[]" id="ufile[]" type="file" size="30"> <input type="submit" name="submitBtn" value="Upload">';
}
var uploadp = "upload_process" + ups;
var uploadf = "upload_form" + ups;
document.getElementById('uploadp').style.display = 'none';
document.getElementById('uploadf').innerHTML = 'result';
document.getElementById('uploadf').style.display = 'block';
}
Function call inside iframe (example) Code: window.top.window.stopUpload(3, 1, test.txt) Thanks for the help. What line of javascript can I use to submit a form that's inside an iFrame? Here are a couple of failed attempts: Code: document.getElementById('captcha_iframe').forms['reserve_booth_space'].submit();
window.frames['captcha_iframe'].forms['reserve_booth_space'].submit();
Alright I have an Iframe, and at the end of that Iframe I have set a variable with JS to be equal to TRUE, indicating that the page has run through the script. I then check that the iframe from the parent window for that variable, if it has not been set yet (or does not equal true) it reloads the iframe. The code works fine FF and Opera. However in IE it does not reload the frame if it is not true, and in Chrome it alerts undefined and does not reload the frame. I have tried accessing the frame through the dom and it did not work for me, and i have also tried simply adding a tail to the iframes source with no success. PHP Code: <iframe name="ifrOne" src="iframe.htm" id="ifrOne"></iframe> <script type="text/javascript"> function frameLoad() { var testOne = window.ifrOne.test_var; if(testOne !== "TRUE") { alert(testOne); document.getElementById('ifrOne').contentDocument.location.reload(true); window.frames['ifrOne'].location.reload(true); } } </script> 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. Hello all, From what I've seen there isn't really a solution to this problem, but I thought I'd try my luck. I'm trying to code a website that's built around an iframe (as in, the nav bar links to content which appears in a central iframe). Now, in one of my pages I've got links that are supposed to open a small text block when they're clicked. I've figured out how to do this using either divs or the DHTML window widget (http://www.dynamicdrive.com/dynamici...ndow/index.htm), but in both cases the tab appears inside the iframe, and it's pretty cramped. I want to position it relative to the parent window, not the iframe, but so far haven't been able to figure out how to do this. Does anyone have an idea? Thanks! Hello- trying to get an api to update status after a user completes a survey, no joy: <script type="text/javascript"> Event.observe(window, 'load', function() { parent.mm_adl_API.LMSSetValue("cmi.core.lesson_status", "completed"); top.mm_adl_API.LMSSetValue("cmi.core.lesson_status", "completed"); window.opener.mm_adl_API.LMSSetValue("cmi.core.lesson_status", "completed"); otherWindow.postMessage("mm_adl_API.LMSSetValue("cmi.core.lesson_status", "completed")","*"); }); </script> please help? The following script will take the option parameter from the page URL and scroll the page to the element which has the matching ID. For example: mypage.html?element3 will cause it to scroll to the element which has an id="element3" when the page loads. Code: <html><head><title></title>
<script type="text/javascript">
function OptionScroll(){
if (location.search.length > 0){
LocnId=unescape(location.search.substring(1))
scrollLocn = document.getElementById(LocnId).offsetTop
document.body.scrollTop = scrollLocn
}
}
</script>
</head>
<body onload="OptionScroll()">
...etc....
This works fine. Now for the next step, I want to be able to do this from a script embedded in an iframe. In other words, when the page loads, the iframe will load and a script within the iframe executes taking the parameter from the parent page's URL, and then scrolls the parent page to the element with the matching ID. Is it possible to do this? Hi, I'm currently developing an application (in php) for a website that is to be integrated into their website using iframe. It's imperative that it's done using iframe as I am placing the application on my own server. In short, the iframe element appears on my customer's website (lets say customer.com) - something like this: <iframe width="440" height="500" frameborder="0" scrolling="no" src="http://www.myserver.com/index.php"></iframe> However, it's quite imperative that my application (i.e. what's located at myserver.com/index.php) only can be shown in iframe elements placed at customer.com. That is: I want to make sure that a similar iframe element from another web server (lets say anothercompany.com) has the possibility to iframe my application located at myserver.com. My first idea was to check this using php in my application: by looking at HTTP_REFERER, I can get the location of the page containing the iframe element. That solution seems to work fine. However, as is well known, it is possible to spoof and even hide the http_referer server variable. Still, as I only want to make sure that no other server accesses the application through an iframe object, it should perhaps be an okay solution - if someone wants to access the application from their own browser, and spoofing the HTTP_REFERER variable, I'm fine with that. (I just want to make sure that only customer.com, and not anothercompany.com, can integrate the application with an iframe). The other thought I had was to use javascript and DOM stuff. The idea is then to use javascript to check that the application has a parent frame and that its location is at customer.com. However, as we are dealing with two different domains here, I'm having a lot of problems getting the document.parent.location variable - it's not allowed! Any solutions on how to do this in javascript? Any way to bypass the obstacle above? Or perhaps javascript isn't the best way? My guess is that there is a solution out there somewhere - I guess there are a lot of ads that are integrated into various websites using iframe, and where the actual content (i.e. what's inside the iframe element) can check which server is embedding the ad through an iframe element. I have an HTML page that is making use of JQUERY and many other JQUERY plugins. Inside this HTML page there are 2 different types of iFrames that display PHP forms. One is a normal iFrame: Code: <iframe height="740" allowTransparency="true" frameborder="0" scrolling="auto" style="width:100%;border:none;overflow-x:hidden" src="https://www.website.com/machform/embed.php?id=9" title="Contact Us"><a href="https://www.website.com/machform/view.php?id=9" title="Contact Us">Contact Us</a></iframe> The other makes use of a JQUERY plugin called Shadowbox: Code: <a href="https://www.website.com/machform/embed.php?id=8" rel="shadowbox;width=1100;height=950;player=iframe" class="button1"><span></span><strong>Click Here</strong></a> Inside these iFrames are PHP forms from a PHP form application called MachForm, which is highly customizable. Here are the questions. Ultimately, I want to accomplish 2 things: 1. I would like to send variable information from the PHP form in the iFrame to my HTML page, to be displayed within javascripts. For example: If someone fills out a PHP form in my iFrame and clicks submit, I want to have a JQUERY popup say, "Thank you, [NAME]". 2. When the user submits the form, the action of clicking the submit button in the PHP form should enable #1, above. There needs to be a way to tell the HTML/Javascript that the submit button on the PHP form in the iFrame has been clicked. I realize this is all fairly vague, especially without the addition of more code. However, I am not even sure if I am posting this in the correct forum, since it incorporates a little of several languages and styles. From this point any direction or idea would be very helpful! I want to implement a javascript function where a submit button will be submitted from the parent page each time I close a child page. Please let me know what I did wrong in my code and please elaborate your answer so that I could understand it better. Thank you so much for your help. I have the following jscript code but it is now working. Code: window.onunload = submitParent;
function submitParent()
{
var doc = window.opener.document,
theForm = doc.getElementById("finalForm");
theField = doc.getElementById("finalSelected");
theForm.submit();
theField.trigger('click');
}
My form from the parent page is as follow. I want my jscript to just click on the submit button once. Code: <form id = "finalForm "name= "finalForm" method="POST" action=""> <input type="Submit" id = "finalSelected" name="finalSelected"/> 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: I have the following div popup window: PHP Code: <div id='PopUp' style='display: none; position: absolute; height: auto; left: 13px; top: 10px; border: solid black 1px; padding: 10px; background-color: rgb(255,255,225); opacity:.95; text-align: justify; font-size: 12px; width: 70%; z-index:1200;'> <iframe id="mate\" frameborder=0 scrolling=yes width=100% src='client_edit/edit_client_data.php?customerid=$customerid' height=\"790\" align=\"left\"></iframe><br /> <div valign=\"top\" style='text-align: right; display: inline; position: absolute; left: 10px; top: 10px;'><a onmouseover='this.style.cursor=\"pointer\" ' style='font-size: 12px;' onfocus='this.blur();' onclick=\"document.getElementById('PopUp').style.display = 'none' \" ><span valign='left' style=\"text-decoration: underline;\" ><img border='0' src='images/the-delete.png' width='22' height='20' title='Close Window'></span></a> </div></div> the popup is opened from its parent page with the following onclick event: PHP Code: <a href="javascript:void(0)\" onmouseover=\"document.edit_info.src='images/edit-user-info2.png'\" onmouseout=\"document.edit_info.src='images/edit-user-info.png'\" onclick=\"document.getElementById('PopUp').style.display = 'block' \"><IMG SRC=\"images/edit-user-info.png\" NAME=\"edit_info\" width='40' height='40' title='Edit Customer Contacts' ALT=\"...\"></a> Now when the popup is closed, I would like the parent page to automatically refresh. I would appreciate some help on this. To close the popup, the following is invoked: PHP Code: <div valign="top\" style='text-align: right; display: inline; position: absolute; left: 10px; top: 10px;'><a onmouseover='this.style.cursor=\"pointer\" ' style='font-size: 12px;' onfocus='this.blur();' onclick=\"document.getElementById('PopUp').style.display = 'none' \" ><span valign='left' style=\"text-decoration: underline;\" ><img border='0' src='images/the-delete.png' width='22' height='20' title='Close Window'></span></a> </div> Hi I wanted to control parent page form popup. For example, I have a page: http://www.cmela.com/zz.php When i open a popup by clicking "Click Here to open popup page" and then on popup window, i wanted it to transfer parent page from making a click on a pop up window. Example is at: http://www.cmela.com/zz.php open pop up window, and then by clicking on a link on a pop up window i wanted my parent page to go to www.msn.com any help? Thanks I have a form in an iframe that submits nicely. Here is one of the hidden fields that gives the page to redirect to after submitting the form: Code: <input type="hidden" name="rtrn" value="http://www.domain.com/thanks.html" target="_parent"> The parent target doesn't work, does anyone know how I get the thanks page to replace the page containing the iframe? |
|||||||