Load new HTML page in Parent from iFrame Child - html

I have an HTML page with an <iframe> that loads an HTML form. The form inside the iFrame posts to a PHP script.
Upon completion of the PHP script, how can it load an entirely different HTML page outside of the iFrame?

not in php, php syntax is
header( 'Location: url' ) ;
but it only works if you havent done anything else yet.
but you can do it with javascript like so
document.location.replace("url")
or
document.location.href = "url";
so with php you can write (after form is submitted)
echo "<script>document.location.replace('url');</script>";
or
echo "<script>document.location.href = 'url';</script>"
edit
i changed window (redirects iframe) to document (redirects page) i should work now, sorry about that.
you can also use top.window.location i think.
a simpler way to do this is in the actual html <form action="url" target="_top">. however this will skip form-validation.

Related

How to block direct access to html page

I have a sub html (template) products.html, that I included in my index.html page with JavaScript/jquery function .load()
Now the problem is products.html can be access directly if you type its url, and it gives a very ugly page alone, so I tried to redirect anyone who tries to access it to index.html using JS function windows.location. The problem with this method is, when my template is loaded in my main page, the js script fires, and it leads to refresh to the page. So is there another way to go about this !?
You can define a variable like window.parentPage = true;
in the index.html file.
In the products.html page make a check like so:
if(!window.parentPage)
{
window.location.href = "YOUR REDIRECTION PAGE"
}
Another alternative:
<body onload="if (document.referrer == '') self.location='index.html';">

Redirect URL using?

Is there any way to redirect a URL by having 1 centeral redirect page like:
example.com/redirect
and having a sort of attribute at the end to redirect to a certain page,
example.com/redirect?pagename
and in the code it will tell the webpage to redirect to the desired page.
Sorry if I baffled or anything I'm quite new to this sorta stuff.
That is possible if you can have a CGI script, FastCGI program, or PHP script behind that URL. It can then look at the parameter and dynamically create a reply page with HTML redirect in the header.
You can by adding in your redirect page or
javascript:
<script>
window.location = "http://google.com";
</script>
or
PHP:
<?php
header("Location:http://google.com")
?>

How to handle refresh while using iFrame in page structure

This is my web structure. In which all link contents are opened in iFrame when link is clicked.
Say I have clicked on 1st link (not Home page) , it gets open in iFrame,contents are displayed properly,all ok. But as I press refresh button expected is shlould load same page whose link I have clicked,but instead of that it loads Home page.
How should I be on same page after refresh also?
I'm using php for server side scripting. Thanks!
Edit:
I tried to store visited page name in session variable and then while loading Home page I check like
$_Session['visited']='/pages/neworder.html';
if(isset($_Session['visited']))
{
echo "<script>window.location.href=</script>".$_Session['visited'];
}
But didnt work!
I think the simplest way is with Jquery. If you make your website use anchors, for example
http://yoursite.com/#page-example
example
When you refresh the page, you will still be accessing this anchor. With jquery you can get this value and do some stuff based on that. So!
var hash = $(this).attr('href').split('#')[1];
This will get that # value, you can compare that in javascript then, or use a switch to determine what to do or simulate the page change.
Server side: Link sends GET request to the page and the src of the iFrame is set by the server.
-OR-
Client side: Add onclick function on the links which changes the src atribute for example with the following code:
document.getElementById('Iframe').src="new link";
-OR-
<iframe src="startin_link" name="iframe_a"></iframe>
<p>link</p>
Pure html.
EDIT: If you want to stay in the page... I suggest you use the first option. Example:
<a href='?page=1'>Some link</a>
then on server side:
if(!is_null($_GET['page'])){
$iframeLink=arrayOfLinks[$_GET['page']];
}else{
$iframeLink="Starting Link";
}
and the iFrame should look like this:
<iframe src='<?php echo $iframeLink; ?>'></iframe>

How do I get link to show HTML source?

I'd like my web page to have a "Show Source" link that will show the source of my HTML.
I'm also wondering if there's something I could append to the URL of my page that'll just show the source as opposed to rendering the page. Like this...
http://www.example.com/mypage.html#show_source
If you are okay with a link that opens source, you could use the following javascript:
if you are using FF:
window.location = "view-source:" + window.location.href;
and with IE:
var popup=window.open();
popup.document.open('text/plain').write(document.documentElement.outerHTML)
If all you need is code between the body tags - then you could do the following:
document.body.innerHTML
Can you provide a bit more information on the application?
"View Source Button" could be a solution, but if you need a direct link you need to change the Content-Type Header of your file to "plain/text".
If your page could be, for example, a PHP script, it would be:
<?php if($_GET["viewsource"]=="yes") header("Content-Type: plain/text"); ?>
and you can open link by appending ?viewsource=yes to your URL.
Remember, it works only "server side".

Embedding part of a web site

Suppose I want to embed the latest comic strip of one of my favorite webcomics into my site as a kind of promotion for it. The webcomic has the strip inside of a div with an id, so I figured I can just embed the div in my site, except that I couldn't find any code examples for how to do it (they all show how to embed flash or a whole website).
Can someone please show me (or tell) how it's done?
PS I'd rather not use server side scripting or external services (which is what is often recommended for embedding RSS).
Update - Cross domain request with jQuery (on client side)
Yesterday I was browsing James Padolsey's blog, where he posted a great article, on how to do cross domain request with jQuery, also Chris Heilmann has a nice DEMO.
The principle is to use YQL -> a yahoo api for web page queries, where you receive a JSON with all the html. Happy scraping :)
Scrape remote data with php, load with jQuery
What about considering simple AJAX call, that would intercept the comic element and update with its contents your <div id="update-comic" /> primarily used for this purpose?
Also you will use a simple php to get the remote page, cause you cannot make ajax call on another domain
note: user must have JavaScript enabled, also following code uses jQuery library
Putting it all together
on your page, where you want to display remote comic strip create a div only for this purpose, lets call it update-comic
<div id="update-comic">
<!-- here comes scraped content -->
</div>
write down the php, call it comic-scrape.php, it will download the html from remote page, you should consider caching the response and updating it on a specified interval (e.g. 30min, 1hr, your call.. :))
server performance should not suffer after simple cache checking implementation
<?php
$url = 'http://www.example.com/';
$response = file_get_contents($url);
echo $response;
now comes the jQuery magic, where you make ajax call on your php scraper and take only the relevant element you are interested in. Place this script inside your view page (where you have your <div id="update-comic" />
<script type="text/javascript">
$(function () {
// set all your required variables
var
localUrl = '/comic-scrape.php',
elementId = '#remote-comic-id',
elementToUpdate = $('#update-comic');
// update the local elementToUpdate with elementId contents
// from your php in localUrl
elementToUpdate.load(localUrl + ' ' + elementId;
});
</script>
I hope, I covered everything.
Employing simplexml and xpath
As philfreo suggested in comment, a viable solution could also contain selecting the required id server-side. It is very easy with use of php's simplexml and a little xpath:
<?php
// set remote url and div id to be found
$elementId = 'remote-comic-id';
$url = 'http://www.example.com/';
// instantiate simple xml element and populate from $url
$xml = new SimpleXMLElement($url, null, true);
// find required div by id
$result = $xml->xpath("//div[id={$elementId}]");
// take first element from array, which is our desired div
$div = array_pop($result);
echo $div;
It's impossible because you cannot manipulate iframe/frame content. Using iframe tag will just modify content in tag, but not the src.
Neither with AJAX, because you have to be on the same domain.
So, for example, you can use PHP with cURL or quite simply with fopen.
You can just use an iframe. The content isn't literally on that page, but it looks like it.
Here's an example: http://www.w3schools.com/TAGS/tryit.asp?filename=tryhtml_iframe
It looks like this:
<iframe src ="http://www.example.com/index.html" width="100%" height="300"></iframe>
<embed src="url of your comic" width="300" height="250" />