|
JavaScript - Iframe Buster...buster! (disable Iframe Parent Redirection)
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? Similar TutorialsI 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 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 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? 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 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. 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> 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. ... 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 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. 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();
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! 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. 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? 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! 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? 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 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. 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. 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? |
|||||||