Can I use a socket through multiple HTML pages? - javascript

For example, if a user enters my webapp through the standard index.html page that is loaded automatically, can that socket still be used if the user clicks a button on my webpage that loads another html page thats part of my webapp? Right now, I have one front end js page that is used for my 3 html files. It works fine for my standard index file, but when I click a button that leads to another html file (Which is also connected to my front end js page), it says that io is not defined in the console.

Loading a new HTML page will cause the Javascript on the new page to execute - this will destroy any context from the previous page (including established connections).
There are a couple of ways around this:
write your code to re-establish the connection on page load. This will require passing an identifier of some sort so the new connection is associated with the existing session.
write your application as a single page app (SPA). In an SPA, the pages are rendered on the client side, as part of a Javascript app passed to the client on the first load. Thus, since there is no reload when a user is moving from one page to another, the connection is not lost.

Related

Measure Page Load Time Speed in Single Page Applications

I researched a lot on how to measure the page load times in a single page application like React, Vue etc but did not get any proper answer.
In Websites that are built using Single Page Application frameworks/libraries like vue, react etc load the initial page only once and then all the route changes do not fire a page load. To understand it better let us say our landing page is /index. When index route is loaded it is considered a Page Load but when we change the route to let's say /index/products here SPA takes care of it and loads the content using AJAX without loading the page.
But in websites that are built without SPA frameworks the case is different it loads every page on route changes and we can run the below line of code on each page and get the performance metrics.
performance.getEntriesByName(window.location.href)
This line of code simply returns a dataset containing some information about the page load speeds as shown in the image below.
So in SPA it runs only once and not when we change the routes. So what I want to do here is that I need to make this line run on every route change so that I get the above performance metrics that are shown in the image for every page.
Right now it only runs for the main page and when I change the routes inside the website, it does not run for every page. But in the case of reload it works properly because reload is again a new page load.

How to handle 3rd party javascript app with cookies?

I have a question about loading javascript source and initialize function on a page depends on the user`s cookie preference. I have an API that I can check the user's cookie preference with javascript.
My first idea was to hide(with js) the app (which will be loaded on the page via 3rd party script source and initialize function) and show a message to the user that the user can't see the app/content because of his/her cookie setting. But on the legal side, it is allowed because even the user doesn't see the app/content it is going to be loaded on the browser.
My second idea was creating a script tag dynamically and adding in head and run the initialize function,
but in this case, if initialize works faster than script tag creating function, I get an error. And even if it works sometimes user has to reload page couple of times to load the app.
Is there any better practice/idea that you can advise me on?

how to set up a simple web page within the google app script (or by pass the limitation of hosting single html file)?)

I am trying to set up a web application that contains 2 html pages. One is the login page and another present the data. However, I have difficulty re-loading or doing DOM manipulation once the user click the login button (which called a server-side function). I have read from previous instruction that google app script could only host one HTML and dose not support DOM manipulation. I tried to do reload the page but it dose not work. Is there any way to bypass the limitation ?

Append javascript/html to page when navigating from a different page?

Alright, first off this is not a malicious question I'm asking. I have no intentions of using any info for ill gains.
I have an application that contains an embedded browser. This browser runs within the application's process, so I can't access it via Selenium WebDriver or anything like that. I know that it's possible to dynamically append scripts and html to loaded web pages via WebDriver, because I've done it.
In the embedded browser, I don't have access to the pages that get loaded. Instead, I can create my own html/javascript pages and execute them, to manipulate the application that houses the browser. I'm having trouble manipulating the existing pages within the browser.
Is there a way to dynamically add javascript to a page when you navigate to it and have it execute right after the page loads?
Something like
page1.navigateToUrl(executeThisScriptOnLoad)
page2 then executes the passed script.
I guess it is not possible to do it without knowledge of destination site. Although you can send data to the site and then use eval() function to evaluate sent data on destination page.

loading remote page into DOM with javascript

I am trying to write a web widget which will allow users to display customized information (from my website) in their own web page. The mechanism I want to use (for creating the web widget) is javascript.
So basically, I want to be able to write some javascript code like this (this is what the end user copies into their HTML page, to get my widget displayed in their page)
<script type="text/javascript">
/* javascript here to fetch page from remote url and insert into DOM */
</script>
I have two questions:
how do I write a javascript code to fetch the page from the remote url?
Ideally this will be PLAIN javascript (i.e. not using jQuery etc - since I dont want to force the user to get third party scripts jQuery which may conflict with other scripts on their page etc)
The page I am fetching contains inline javascript, which gets executed in an body.onLoad event, as well as other functions which are used in response to user actions - my questions are:
i). will the body.onLoad event be triggered for the retrieved document?.
ii). If the retrieved page is dumped directly into the DOM, then the document will contain two <body> sections, which is no longer valid (X)HTML - however, I need the body.onLoad event to be triggered for the page to be setup correctly, and I also need the other functions in the retrieved page, for the retrieved page to be able to respond to the user interaction.
Any suggestions/tips on how I can solve these problems?
There are two approaches to this.
The host site uses an <iframe> tag to include your page in a fixed-size box inside their page. It operates in its own document with its own <body> and onload event; it is in your site's security context so it can use AJAX to call back to your server if it needs to for some reason.
This is easy; the guest page doesn't even especially need to know it is being included in an iframe.
The host site uses <script src="http://your-site/thing.js"></script> to run a script from your server. Your script creates a load of content directly inside the host document using document.write() or DOM methods. Either way you know when you've finished putting them in place so you don't need onload.
You are running in the host's security context, so you can't AJAX to your server or look at your server's cookies directly; any such data must be served as part of the script. (You can look at the host server's cookies and cross-site-script into any of their pages, and conversely if there is any sensitive data in your script the host site gets to see it too. So there is an implicit trust relationship any time one site takes scripting content from another.)

Categories