Menu
I am creating a website in which the site is framed. For better visit here, it has the page of http://cocvidarbha.epizy.com/voting.
Now I want to visit http://cocvidarbha.epizy.com/voting/1.php. But the URL should be seen as http://cocvidarbha.epizy.com/ only.
I have only used frame source in index.php of http://cocvidarbha.epizy.com/
758
To use frames on a page we use <frameset> tag instead of <body> tag. The <frameset> tag defines, how to divide the window into frames. The rows attribute of <frameset> tag defines horizontal frames and cols attribute defines vertical frames.
This is more of an client-side answer.
Option 1:
What you can do is tell the browser to change the URL to something else you desire(could also be an non-existing path). Note, you will not be able to change your domain name.
So, in your 1.php file add:
<script>
window.history.pushState("{data: 'pass data'}", "PageTitle", "/url");
</script>
within in the head tag.
Option: 2
Another way I would recommend is using Ajax.
You could bind all your <a href="/url">, so that when you click it, it returns the data on that url Asynchronously, without reloading the page.
So, in you main index.php file, add:
<li>
<a href="http://cocvidarbha.epizy.com/">Page 1</a>
</li>
<li>
<a href="http://cocvidarbha.epizy.com/voting/1.php">Page 2</a>
</li>
<div id="content">
Content will be loaded here without any page reload or URL change
</div>
And then just before </body>, add:
// Include jQuery
<script
src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha256-k2WSCIexGzOj3Euiig+TlR8gA0EmPjuc79OEeY5L45g="
crossorigin="anonymous"></script>
<script>
$(document).ready(function(e) {
// Bind click event to all "<a>" tags
$(document).on('click', 'a', function(){
var url = $(this).attr('href');
// Do Ajax Call to "href" clicked
$.ajax({
url: url,
type: "GET",
success: function(data){
$('#content').html(data);
}
})
return false;
});
});
</script>
If you only want the voting php either only or part of your index page, you can always embed it into your index page. If the content is dynamic, this is one solution, as it avoids having to use frames (not supported in HTML5) / 301 redirects/ etc..
You could use php include to embed the file. The embedded file will update on the index page as the php file on the server. As jagb suggested below, it would be advisable to use readfile when including a file; it will return an error message if the file does not exist.
e.g.:
@media (orientation: portrait) {
body, .reorientMessage{
visibility: visible;
}
.mainContent{
visibility: hidden ;
}
}
@media (orientation: landscape) {
.reorientMessage{
visibility: hidden;
}
body,.mainContent{
visibility: visible ;
}
}<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="reorientMessage">please reorient etc..</div>
<div class="mainContent"><p>normal stuff here</p>
<br><br></div>
<?php include $_SERVER['DOCUMENT_ROOT'] . '/path/1.php';?>
</body>
</html>[html above taken from the source output from your index page - 1.php embedded]
The file_get_contents php function will read the contents of the 1.php file and return the contents as a string.
You can embed it similarly using
<?php
$1 = file_get_contents('./yourserverpath/1.php');
echo $1;
?>
where $1 is your variable that holds the contents of the file (and subsequently spits them out! :) )
so your final index page code would look like this:
@media (orientation: portrait) {
body,
.reorientMessage {
visibility: visible;
}
.mainContent {
visibility: hidden;
}
}
@media (orientation: landscape) {
.reorientMessage {
visibility: hidden;
}
body,
.mainContent {
visibility: visible;
}
}<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="reorientMessage">please reorient etc..</div>
<div class="mainContent">
<p>normal stuff here</p>
<br><br></div>
<?php
$1 = file_get_contents('http://cocvidarbha.epizy.com/voting/1.php');
//I'm putting in the url cos i don't know your path but use the suggested
//method - $1 = file_get_contents('./yourserverpath/1.php');
echo $1;
?>
</body>
</html>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
