My site is in HTML, Js, Jquery. It is not having any language to run.Now I want to integrate access level based on login using API call and cookie. If cookie set then allow to access some pages using HTML and CSS.
The private HTML page contains the private data which should be accessible after login and login credentials will be checked by the API call if it is success or not.
If some user will get the private page link and try to access it through the direct hit it should not work and redirect to the login page without disclosing the content using page view source and inspect element through also.
I tried below solutions:
1) Use window.load() function with the redirection code with default body content display none but it is disclosing content in view source
2) I have used the angularjs with ng-show and ng-hide concept but for HTML page it is hiding content in inspector but showing content in view page source.
Angular Js:
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body ng-app="">
Show HTML: <input type="checkbox" ng-model="myVar">
<div ng-show="myVar">
<h1>Welcome</h1>
<p>Welcome to my home.</p>
</div>
</body>
</html>
In this I want to hide the whole content to the front user without available in view page source also. Can anyone have any idea that how can I do that with HTML pages using JS or any other Js library solution?
David is correct in his comment, if the user shouldn't have access to the data at all, it should not be retrieved by the client. If you're just wanting to keep content out of the inspector and page in general, you can use ng-if instead of ng-show.
Related
So I'm pretty new to html/javascript but i'm working on a project where i'm loading a external html page inside a div, that when loaded looks like so:
<div class="content" id="content">
<object type="text/html" data="./ProjectsHTML/radio_project.html">
#document
</object>
</div>
and inside the '#document' is the external html. This external html contains some titles that can be minimized and maximazed to hide/show their content.
I have a side-menu on the main html that displays all the titles (the titles were hard coded on the side-menu) and I want to access the titles position inside the external html so when the title is clicked on the side menu, the external html autoscrolls to the position of said title.
If it's usefull for the solution, I'm using Electron.
Please help :)
Assuming the pages are from the same domain, a similar question is addressed here.
However, if the page within the iframe is from a different domain, you won't be able to access individual elements - that's cross-site scripting, and it is a security vulnerability.
There are a few options if you own both pages, even if they are on separate domains:
You could add HTML links/bookmarks to the page within the iframe and then reload the iframe when the user clicks the menu option on your host page. If would require a reload of the page within the iframe, but it could be used to get similar behavior.
You could post messages to the iframe and handle "scroll requests" in the hosted page. You will want to be careful with validation of the source of those messages.
I found a website that has the same header for all the pages which never reloads when navigating through pages. After header loads once, it stays in place and the rest of the layout (content and footer) loads from page to page. Its pretty much like when you have a frameset but its not.
Mouse hover the upper menu and click on any item and you will see what I mean.
What is this technique called? I would like to know the name so I can research about it and learn it.
Thank you.
After reviewing the website you submitted I was able to find a javascript file, which as many people suggested uses ajax to load the contents into the page without reloading it, after the webpage is loaded the script triggers a hashchange which changes the url to match the one you clicked on using window.history.pushState as suggested by #escapedcat , the javascript also handles the animation and changes the classes of certain elements in the webpage to reflect it's state (updating, etc..)
The code is uglified but you can still see how this is done
link
edit
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Page 1</title>
</head>
<body>
<header>
<nav>Link</nav>
</header>
<div id="content">
this is the default content
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script type="text/javascript">
$('nav a').on('click', function(e){
e.preventDefault();
console.log('test');
$.get(this.href, function(data){
$('#content').html(data);
console.log(this);
history.pushState({foo:'bar'}, 'second page', 'page.html');
});
});
</script>
</body>
</html>
page.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Page 2</title>
</head>
<body>
This is page 2
</body>
</html>
The above changes the url, you still have to do further development of the code to get full functionality i.e.(back button)
you can refer to Page not reloading via 'back' when using pushState() / onpopstate to add this kind of functionality
edit:
The pushState() method
as the documentation states the pushState method recieves 3 arguments, a state object containing serialized information associated with the new history entry, the page title, and the page url, each time a user navigates to a new history entry the popstate method is fired and the state changes to represent the current state
The technique is called a "Single page application" (a.k.a. SPA).
You can create a SPA using any framework or library you wish (e.g. AngularJS, ReactJS, jQuery, etc) as long as you follow some guidelines.
A single-page application (SPA) is a web application or web site that
fits on a single web page with the goal of providing a more fluent
user experience similar to a desktop application. In a SPA, either all
necessary code – HTML, JavaScript, and CSS – is retrieved with a
single page load, or the appropriate resources are dynamically
loaded and added to the page as necessary, usually in response to user
actions.
Assuming that we're not loading all of the content in advance, the basic guidelines are:
When the server loads the page for the first time, you decipher the URL and return the appropriate page. The page should contain an identical template for all pages, while only a dedicated part of the html file is reserved for the dynamic content.
For example, all pages in my website should return the same header and load the same javascript files, the part that changes is only my #content element which contains the html of that specific page, according to the URL.
When the user clicks an internal link you perform the following operations:
Prevent the link from navigating, using event.preventDefault()
Change the URL yourself, using the history API (history.pushState(stateObj, title, path))
Load the content using Ajax and replace the the existing content with the new one.
Listen to popState events to detect change in the URL due to the use of the back and forward buttons. (window.addEventListener('popstate', handler))
Load content according to the new URL.
Note: The server needs to provide the content (without the rest of the template) using Ajax.
Concerning the "How", that is completely up to you as long as you understand the workflow of a SPA.
The technology used is Angular JS. If you want to learn this technology you can
use http://www.w3schools.com/angular/ or http://www.tutorialspoint.com/angularjs/
.If you want to see the page souce code you can right click and then go to inspect and right click and then go to inspect view page source. By Inspecting you will see the real time changes that are happening in the backend.
Im not sure how this person does it but how you could make this is:
When an user clicks on a menu item load the content with ajax (no refresh)
$(document).ready(function(){
$("menu-item").click(function(){
$("#content").load("something");
});
});
You can update the url with :
window.history.replaceState(“object or string”, “Title”, “/another-new-url”);
this updates the url without a refresh
If a user lands on a specific url you can pass the required data based on the url to load the right content.
You can use Meteor.js too.
Their own website is built using meteor.js and you can clearly see the functionality you want on that website.
You can achieve same by the a layers in css (click here to know more)
For the site you suggested there will be three layers
Image
Header(which will scroll down on mouse hover)
The Background image (That is Hidden by the Header)
So I have a winforms(windows) application and it has a form that reloads a datagrid every 30secs, this form has a few other controls in it as well.
I am trying to convert this application to the web(ASP.NET MVC5) and I trying to figure out a way to do the reload portion of my application.
I have the page created and I have a button on the page that reloads the data on the table(partialview is returned). How can I make that partial view auto reload itself? Without using javascript or jquery?
You mentioned a div specifically, but I don't think that's possible. You could however use an iframe, maybe.
You could use a refresh header on a page embedded in an iframe.
So, we'll call the file that goes in the iframe refreshing_form.html and here's its structure:
<html>
<head>
<META http-equiv="refresh" content="5;URL=refreshing_form.html">
</head>
<body>
<!-- Your content here -->
</body>
</html>
And then in the main page, we have the iframe...
<iframe src="refreshing_form.html"></iframe>
The refreshing_form.html will reload itself in a loop forever. The containing page with the iframe will not reload (though the content of the iframe will). Poor man's ajax.
However, this seems like a lot of cludge to do something that javascript is really good at. Are you sure you can't use it?
I want to do something where i have a link on a page called home.php that links to facebook , when you click on this link i want it to take you to a page called frame.php with a header at the top and the facebook link in an iframe. like this: http://themeforest.net/item/ime-portfolio-web-app/full_screen_preview/2918523 can anyone advise what the best way to do this is. If you look in the source of that link you'll see they have a header followed by an iframe with the previous link propagated into it.
Hope this all makes sense, if not heres some basic coding of what I'm trying to acheive:
link
---Next Page
<header>My website name/logo</header>
<iframe src="propagated iframe link from previous page">
You need to create a new page which contains the header and an iframe below. This page needs to take a URL in via the query-string and then output the url as the src of the iframe.
An example PHP page (iframe.php) (Just the bare minimum stuff):
<html>
<head>
</head>
<body>
<div id="header">Your header</div>
<iframe src="<?$_GET['url']?>"></iframe>
</body>
</html>
Then you call this page like so:
Open page
This should give you an idea how it's done, but note that you might need to check the incoming URL and only allow certain domains etc. in case you do not want users to be able to open what ever URL they want through your iframe.php page.
That is not possible since your cannot load Facebook in an iframe, it's forbidden.
Otherwise, your frame.php page could have simply contained a <header> and the <iframe> below.
Most of the example sites (like below) that JQM link to use a common navigation system, I'll use this site as an example:
http://www.takemefishing.org/mobile/
When linking to another page that isn't already in the DOM, they use the ajax navigation for example, on the homepage they link to 'Fish Species' with a href of
#/mobile/fish-species.
On click, this actually loads the page into the DOM via ajax from /mobile/fish-species which only contains the <div data-role="page" id="fish-species">... content here ...</div>
Then the address bar is updated to /mobile/#/mobile/fish-species.
If you go directly to /mobile/#/mobile/fish-species (e.g. by using the refresh button or a direct link), it loads the homepage with all the CSS, JS etc etc, and then via ajax loads /mobile/fish-species into the DOM seemlessly.
This structure/system seems to be the common method used on JQM sites, for example Walt Disney and Standford University.
My question is how are they making this magic happen? I suspect JQM is doing almost all of the work, and there is just some config option or flag that I am missing.
Here's what I've tried
I have a basic JQM homepage /mobile/index.html with the DOCTPYE, <head> section with CSS, JS etc etc included, and a link to another page page2.html:
<li>Page 2</li>
Page 2 is similar to the 'Fish Species' page whereby it just containts the:
<div data-role="page" id="page2.html">... content here ...</div>
Now, when I click the link on the homepage, page2.html is loaded into the DOM via ajax and shown. The problem is the addressbar shows:
/mobile/page2.html
If I then click the browsers refresh button, or navigate directly to /mobile/page2.html, of course the browser just loads page2.html containing only the page <div> and no head section or CSS/JS included.
What am I missing to get the link to show #/mobile/page2.html in the address bar when loaded, and then if refreshed I want to load the homepage then pull page2 in via ajax, just like the example sites do?
I am using the latest JQM at http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js
Jquery Mobile will interpret navigation to the address #address as navigation to the page named address
This means that you can define in your single index.html two pages, for instance
<div data-role="page" id="index.html">link to JQM page2</div>
<div data-role="page" id="page2.html">... content here ...</div>
Clicking on the link in the first page will load the content of the second page and update the location displayed in your browser's address bar accordingly.
This is the standard JQM approach, used for instance in the stanford website you linked to.
The Disney and Fish websites look like they are doing things slightly differently as they apparently dynamically generate the target page by binding to the pagechange event, analyzing the target address and acting accordingly. You can see more details on dynamically generating pages in the jquery mobile docs.