JavaScript - Hidden Iframe => Redirect To => Full Screen Iframe?

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.

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'm completely new here and seeking some help on this js:

http://www.javascriptkit.com/script/...ow/index.shtml

i'm building my picture website, an example is this one:

http://www.lucagodina.com/mello/test.htm

do you know how can i have all the thumbnails on the same row, and scrolling? because if i've let's say 100 pictures, the thumbnails will cover the pics itself!

Would also be great to have play-next-previous button...

i know i'm asking a lot! hope someone can help me out!

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?

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?

This is a search box that I can add to my site. However, it stretches to the full width of the screen. Is there any way I can get it to reduce in width to about 25%?

Code:

<!-- place this javascript fragment in your page where you want the nhs evidence search panel to appear -->
<script type="text/javascript">
var _nhsesp_unique_id='b7130ea1-a037-4c09-85d9-e4341d8ad58b';
var _nhsesp_base_uri=("https:"==document.location.protocol?"https://":"http://")+'www.evidence.nhs.uk';
document.write(unescape("%3Cscript src='"+_nhsesp_base_uri+"/evidence-search-panel-1.1.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<!-- end of evidence search panel script -->

Cheers Daniel.

There is a stand-alone, full-screen slide show code published at

http://www.javascriptkit.com/script/...ow/index.shtml

I would like to know how to set the size of the show to less than full-screen, and how to integrate the show with other web content.

I have an emagazine i want to add to my website, the probelm is when it opens in a browser you have to sroll down the page, to view it all, what i was wondering is, is it possibe to create a link that when somebody selects to view the magazine it forces the browser to openin full screen mode so that it fits niely on the screen without the toolbars and evertything taking up half the page.

Thanks

Hello....

I've 2 iframes. And i want to change the css class of second iframe anchor tag from the first.
Code:

 <div id="top-navigation" title="top-navi">
        <ul><li id="homePageLink" class="first">
                  <a  id="homePageTab"  class="navigation-font" href="</a>
              </li>
        </ul>
  </div>

In the above code how can i change the class="navigation-font" from the first iframe?

Please help....

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...

Hi:

The code below, partly suggested by Old Pedant, will open the radio button PDF file, but it will take up the entire screen. Is it possible to open the checked PDF file in a slightly smaller screen so that the user, when finished with the PDF file, can always be sure that he/she is closing only the PDF file and not the browser?

I'm trying to use the showDetails() to do this, but am having two problems: 1) where in the <body> should this function be "called", and 2) how does one get a file name into the first parameter of window.open when the name of the file is not known until the user has checked one of the several choices?

Or is it the Foxit and Adobe Readers that govern the screen size of the PDF files, and not Javascript? Thanks for any help and pointing me in the right direction.



<?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" xml:lang="en" lang="en">
<head>
<title>Open smaller PDF window.html</title>


<script type="text/javascript">
function goToCheckedValue ( rbs ) //courtesy of Old Pedant
{
var go = null;
if (rbs.length == null )
{
if (rbs.checked ) go = rbs.value;
} else {
for (var r = 0; r < rbs.length; ++r )
{
if (rbs[r].checked ) go = rbs [r].value;

}
}
if ( go == null ) return;
location.href = go;

}
var detailsWindow;
function showDetails()
{
//leave filename parameter blank
detailsWindow = window.open("","", "width=500,height=350");
detailsWindow.focus();

}

</script>
</head>


<body>

<form name="myForm">
<fieldset id="pdfchoices">
<input type="radio" name="gmplitword" value="11.pdf" checked="checked" /> Gospel Acclamation <br />
<input type="radio" name="gmplitword" value="15.pdf" /> Gospel Acclamation - Lent <br />
<input type="radio" name="gmplitword" value="16.pdf" /> Gospel Acclamation - Paschal time <br />
<input type="radio" name="gmplitword" value="23.pdf" /> Apostles' Creed (IV) <br /> <br />
<input type="button" value="Open PDF file" onclick="goToCheckedValue(this.form.gmplitword)" />
</fieldset>
</form>

</body>
</html>

Dear Experts,

I am very new for javascript so I am not even sure it is possible or not.

The situation is like this,

I have a page, which is actually a photo gallery with a table having 3 rows. First row shows the full screen size pic. Second row displays the Caption of that image and third row shows thumbnail view of six different images and the previous and next button.

this is the sample layout:

<table>
<tr>
<td colspan=8>
Full size image will be shown in this cell
</td>
</tr>
<tr>
<td colspan=8>
Caption of the image will be displayed here
</td>
</tr>
<tr>
<td>Previous Button</td>
<td>Pic1 thumbnail view</td><td>Pic2 thumbnail view</td><td>Pic3 thumbnail view</td>
<td>Pic4 thumbnail view</td><td>Pic5 thumbnail view</td><td>Pic6 thumbnail view</td>
<td>Next Button</td>
</td>
</tr>

My requirement is whenever the user click on the thumbnail view, which is in the 3rd row, the corresponding full screen size pic should open in 1st row of the table.
As my photo gallery should be having more than 6 pics, lets take 20 pics, I want to show only 6 thumbnails in 3rd row at a time. Whenever user press "Next" button the 3rd row having 6 thumbnails should show other 6 thumbnails and previous button should show previous 6 thumbnails.

I have a guess that it can be done using arrays, but how????? I have no idea. So please if you have any guesses it will be nice if you can post the entire code here as I will not be in a position to work on the hints given by you.

Thanks in advance.

Charles

This is what I tried but alas, it does not work por que no?

This is located on my main index file which if the result of z is greater than 1, I would have the user stay at this page as opposed to redirecting to the portrait design. I have optimized the website for mobile use so there is a reason of having two different pages, the wide screen has extra tools / other stuff that isn't shown on the portrait not because of size/responsive design but becasue I want it to be this way. Anyway... "What's the situation captain?"

This is located above my <style> tag

Code:

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script language="JavaScript" type="text/javascript">
<script>
function redirect() {
var x = screen.width;
var y = screen.height;
var z = x/y;
    if (z<1) {
    window.location.replace("alternate destination");
    };
    else ( ){
    // stay here
    };
};
</script>

Reply With Quote




12-21-2014, 01:58 AM #2
Old Pedant View Profile View Forum Posts

Supreme Master coder! Join Date Feb 2009 Posts 28,311 Thanks 82 Thanked 4,754 Times in 4,716 Posts

You have extra semicolons in there. In general, don't put a semicolon directly after a right brace };

There are a couple of exceptions, but they don't apply here.

What's the point in having the else??