How is this page designed to load view? - javascript

I'm having hard time understanding how this page is being loaded.
While using inspect code I can view different divs but when I click on view source i dont see any div or elements.
https://outlook.live.com/owa/
view-source:https://outlook.live.com/owa/
Can you please explain how they are using js and iframe to load it?

The page is rendered by the client side. Look this https://medium.freecodecamp.org/what-exactly-is-client-side-rendering-and-hows-it-different-from-server-side-rendering-bd5c786b340d

This is called One Page Application.
Just open developer mode in your browser(F12 for chrome) and go to network tab. you should see that the real data traffic between the page and server is there. The page you see is a single page that loads the data on the client side

Related

XmlHttpRequest or iframe to load a web application?

I have a little perfomance issue with a web application I am using and I would like to know how can I solve it.
You see, when I enter to my web application, everything starts loading and takes some time since the application make some requests to a database to retrieve some data. I would like to know if I can put an iframe on a blank page with the link to my application so it can start loading inside the iframe making the rest of the page work and not getting stuck.
I've tried adding a XmlHttpRequest on a blank page requesting the web application link but it onlys retrieves the first elements that loads instantly but stops there. It doesn't get all the elements loaded before the first moment since they have some delay to appear because of the database request the web application makes.
How you guys think that I can load my web application inside another page and while my web application loads, I can still use the rest of the other page without everything getting stuck?
I hope you guys could guide me a little bit. Thank you in advance!
I've solved this by adding an invisible iframe that loads the page I need on the background and on the front I retreive everything with my application. Once I finish, I just delete the iframe on the background and move to the next task.

Getting rendered HTML from a page loaded with clientside JavaScript?

I have a Chrome extension that used to run a background script that would call an API for a website using the users session or cookie.
It'd simply perform a get request and then pull various image URLs from the page using Cheerio.
The owners of the site though have now changed how the pages work. On load, they call a JSON API, and the source of the page uses JavaScript to render the page.
The issues I have now is that when I call a get request, it simply gets the page source, rather than the rendered HTML.
Does anyone know how I can get the rendered HTML? I'd rather not open a tab with the page in chrome, grab the data with a content script and then close it (automatically of course) as there are hundreds of pages to go through, and that's quite intensive on CPU resources

Re-rendering the view without reloading/refreshing the AngularJS Application

The application I'm working on right now contains lots of ng-include directive and I hate to reload the whole application just to see an HTML update.
I've tried Replaying the XHR manually using the Network and it gets back the updated HTML View but definitely, it doesn't get reflected in the DOM.
What I am searching for is a way that all the HTML views get fetched again without me hitting the reload button.
It can be a browser extension or a code snippet (which I'll turn into a browser extension to be used for others) or any other sane way.
Check disable cache checkbox on network page and then try replay XHR. I can't see why you don't want to reload the whole page but whatever.

Angular5(Angular Universal) page source issue

I am working on server side rendering project followed by Angular Universal guide. Everything is working fine, except when I am navigating to other routes other than first page, I still see first page's source when hitting "view page source" in browser.
I have gone through this issue, but in my case routes are not under authorization.
Any idea why I cannot see page source of other routes?
That's normal behaviour. When you make the first request to the server, the page content will be rendered server side, which means that you'll be able to see that content if you see the page's source.
After that, when you navigate through your app's links, all content is rendered by javascript, with data fetched from server using ajax. As you are not changing page (it's a Single Page app) , the View source in the browser's page is never updated. If you type in directly the url of another route in the browser, you should get the corresponding content if you check the source
I solved this problem.In my project I have used Hash Location Strategy. Removing HashLocation Strategy allows me to view source code of other pages.

How do you keep content from your previous web page after clicking a link?

I'm sorry if this is a newbie question but I don't really know what to search for either. How do you keep content from a previous page when navigating through a web site? For example, the right side Activity/Chat bar on facebook. It doesn't appear to refresh when going to different profiles; it's not an iframe and doesn't appear to be ajax (I could be wrong).
Thanks,
I believe what you're seeing in Facebook is not actual "page loads", but clever use of AJAX or AHAH.
So ... imagine you've got a web page. It contains links. Each of those links has a "hook" -- a chunk of JavaScript that gets executed when the link gets clicked.
If your browser doesn't support JavaScript, the link works as it normally would on an old-fashioned page, and loads another page.
But if JavaScript is turned on, then instead of navigating to an HREF, the code run by the hook causes a request to be placed to a different URL that spits out just the HTML that should be used to replace a DIV that's already showing somewhere on the page.
There's still a real link in the HTML just in case JS doesn't work, so the HTML you're seeing looks as it should. Try disabling JavaScript in your browser and see how Facebook works.
Live updates like this are all over the place in Web 2.0 applications, from Facebook to Google Docs to Workflowy to Basecamp, etc. The "better" tools provide the underlying HTML links where possible so that users without JavaScript can still get full use of the applications. (This is called Progressive Enhancement or Graceful degradation, depending on your perspective.) Of course, nobody would expect Google Docs to work without JavaScript.
In the case of a chat like Facebook, you must save the entire conversation on the server side (for example in a database). Then, when the user changes the page, you can restore the state of the conversation on the server side (with PHP) or by querying your server like you do for the chat (Javascript + AJAX).
This isn't done in Javascript. It needs to be done using your back-end scripting language.
In PHP, for example, you use Sessions. The variables set by server-side scripts can be maintained on the server and tied together (between multiple requests/hits) using a cookie.
One really helpful trick is to run HTTPFox in Firefox so you can actually monitor what's happening as you browse from one page to the next. You can check out the POST/Cookies/Response tabs and watch for which web methods are being called by the AJAX-like behaviors on the page. In doing this you can generally deduce how data is flowing to and from the pages, even though you don't have access to the server side code per se.
As for the answer to your specific question, there are too many approaches to list (cookies, server side persistence such as session or database writes, a simple form POST, VIEWSTATE in .net, etc..)
You can open your last closed web-page by pressing ctrl+shift+T . Now you can save content as you like. Example: if i closed a web-page related by document sharing and now i am on travel web page. Then i press ctrl+shift+T. Now automatic my last web-page will open. This function works on Mozilla, e explorer, opera and more. Hope this answer is helpful to you.

Categories