when i click back button from any 3rd party web site to go back to my angular app, I see lots of console errors and my angular app fails to load.
Uncaught TypeError: no access
at :10:29
at :58:5
...
Uncaught ReferenceError: angular is not defined
I tried few apps showcased at https://www.madewithangular.com/ and I see the same problem with them.
Steps to reproduce the problem:
open an angular app in browser. keep the console open to see the errors.
now visit a 3rd party website like google.com in the same tab.
click back button to go back to the angular app.
Is it a known problem ? Any suggestions to fix this problem ?
Thanks.
Update:
go to http://embed.plnkr.co/d8Fb7o8OjUFdXOLKAaS7/
now visit google.com in the same tab.
click back button.
the app does not load. Please open chrome console to see the errors.
Thank you
Related
In a Next.js project, I am coming across a situation where I get a new URL path from an API. And I have to update that URL path in the browser without reloading that page.
I am doing that with the help of History.pushState()
window.history.pushState(nextState,nextTitle,nextURL);
window.history.replaceState(nextState,nextTitle,nextURL);
With help of History.pushState() I am able to update the URL in the browser without reloading that page. But If after I change that URL multiple times and change to some other page. Then if I start pressing the browser back button, I am not able to get that page with the last URL path showing in the browser.
Only that last URL path shows up in the browser URL input, but that page data is not reflected.
Attaching the sample code and reproducing steps video link below. Any help and suggestions are appreciated.
Source Code
Codesandbox
Reproducing Steps
I am also facing same problem, after using history.pushState() browser back button will not work in that page, because according to browser you never went to that page.
That location doesn't exists in JavaScript history object.
How to implement the google tag manager in react project. I already pasted the script code on index.html and code in the body tag.
And it also working am getting API hits on the network console.
note: I don't have any App.js in my project.
enter image description here
But I need to know is enough or not.
if I move to any other page by clicking the link on the home page GTM API is not in the network console?
How to check it's working on all pages?
Inspect the web page
Go to the console tab
type: "dataLayer", if this property exists, then GTM is set correctly. You just need to create the tags and triggers in GTM to track the events that you need
Background
I'm making a portfolio website in React and it is hosted through Netlify. All the websites I have created use React and React Router and are hosted through Netlify
I have four external links on my portfolio:
LinkedIn profile
Github profile
Another website I built called Shoppies
Another website I built called GithubFinder
Problem
When I click links 3 and 4 and then hit the back button in my browser, I sometimes get a 404. This never happens with the first two links and there doesn't seem to be a pattern for when the error does happen.
Here's a link to my website
And a screenshot of the error I geterror message I get
Thanks in advance for the help I really appreciate it!
I am trying to integrate my app into kik, but for a specific action I fall in an error page that says:
Oops, couldn't load. Please try again later.
This panel looks like a kik panel with my app logo at the top
But everything is OK, If I try my app in Chrome with Kik plugin it works well. In fact my app creates an iframe and load it then we use postMessage to communicate between parent and iframe. I put some logs and it seems that everything is OK. Iframe is loaded and send message to parent with postmessage. But when I am in kik, the 'couldn't load' message appears and stops my app.
Does someone know what cause this panel to appear?
I had the exact same problem.
The problem is the combination of loading an iframe after doing browser history manipulation. Since there is no back button in Kik you can just do the page updates without updating the browser history and this will solve your problem.
I use this line to detect Kik and, if detected, ignore browser history updates:
if (!kik.enabled) {
//We are not running in Kik so we can do browser history manipulation here
}
Websites in the Kik browser must be single-page applications. The error screen shows up when the website either fails to load or tries to navigate elsewhere.
Is your website doing any navigation? Also, is there a place where we could take a look at the code?
My canvas app has all started showing a 404 error from my website. I have not had any success in trouble shooting how the app is being redirected a website page rather than showing the original splash screen to install the app. Any ideas on troubleshooting this?
the app address is: http://www.facebook.com/#!/AyopaSoftware?sk=app_155882081129524
You need to fully configure the application that hosts that tab, including the canvas url.