last time i put this custom disable browser back button (Javascript) in my AMP websites page ( websites ).
I use this script to reduce the bounce rate in seo. But after requesting indexing in google search console i got some problem with "There is a required attribute missing from the HTML tag" in this script.
Does anyone know what is the solution to disable this browser back button script on AMP Pages?
<script type = "text/javascript" > history.pushState(null, null); window.addEventListener('popstate', function(event) { history.pushState(null, null); }); </script>
By the way, my page is fully custom html AMP page, so all my css, html, scripts are concatenated inside index.html file.
Websites: luckysanto.com
Is it a valid AMP page? As I can see your script is non-AMP so probably it's deleted by amp sanitizer. You have to run your custom JavaScript in a Web Worker in order to have a valid AMP page. Here is amp-script component documentation.
Since you can only run JS in the web worker (in other words isolated DOM), you cannot manipulate anything outside of it, most likely browser history too.
Related
I am using gatsby js to build my static amp page and you can see the final html output in the search console. You can see that the generated html passes amp validation. That test passes because I copy and pasted the generated html.
However the website fails because on page load the official amp script <script async src="https://cdn.ampproject.org/v0.js"></script> adds ineligible tags. If I remove the script, the html stays the same. There are other scripts but I am 99% sure it's ^ one because I tried removing them one by one.
The script adds things like amp-version i-amphtml-sizer in the css and changes other things on the page. I am not sure why it would add these tags because v0.js is recommended by amp.
You can see the failing page here.
https://search.google.com/test/amp?id=aClwacaTtbw5q7-Dm3glPg&skip_amp_follow=true
If someone can point me to the original amp v0.js I will be truly grateful. The CDN version is uglified+transpiled and it's really hard to debug my issue.
This was caused by amp cache. I had to follow this guide to invalidate the cache for all my amp pages.
https://developers.google.com/amp/cache/update-cache.
I'm new to AMP and we only want something to happen if the current page is not an AMP page. Is there a universal property on window that we can see if it's defined in order to detect if the current view is AMP or not?
Some background: we're currently delivering a react app through a wordpress plugin and we're noticing some errors that might be from AMP pages only (even though we're not approved to run on AMP pages yet - not sure why our script is still attempting to load), so we'd like to not run our script if the current view is an AMP page.
I ended up seeing that the <html> tag tends to have an attribute amp when it's an AMP page. I'm not sure if it's always the case, but if anyone has the same question, this seems to work for my use-case:
document.getElementsByTagName('html')[0].hasAttribute('amp')
There is the "AMP" property after the initialization of the AMP page. This test is more accurate than merely checking for the amp markup.
Beware that adding any custom javascript to do such detections will invalidate the AMP page. The page may still function on its own but will not be able to exploit the AMP-cache or search engine enhancements.
Not onwindow, but the AMP spec requires the html tag to have either the ⚡ or amp attribute, that is, either <html ⚡> or <html amp>. It also requires <style amp-boilerplate> inside head. Should be easy to use JavaScript to check.
For the spec statements, see https://www.ampproject.org/docs/fundamentals/spec#required-markup
If you are using chrome browser then install below extension:
AMP Validator(https://chrome.google.com/webstore/detail/amp-validator/nmoffdblmcmgeicmolmhobpoocbbmknc?hl=en)
If current page is using AMP then this extension become active in browser.
Ultimate goal is to cycle through photos on a blog page. Seems like 'document.getElementById().src' would be a good approach.
Problem: To make sure the javascript code is successfully linking to the blog page, I tried testing with this in my script.js file:
document.getElementById('testID').innerHTML = "Running test";
and this in my .html file:
<div id="testID"></div>
But, the text "Running Test" does not show up on the blog page. However, when running this same exact test in my index.html page, it does work. Both .html files load the same script file along with jQuery. I don't understand why it works in one html file and not the other.
NEW FINDING:
This line of code now works on the blog page when I remove it from inside
$(document).ready(function(){ ... });
Why would that be?
The Javascript in the current page can only access HTML elements that are in pages that are currently loaded into the browser.
More specifically, document.getElementById() ONLY searches the current web page's document for matching elements. It does not search any other pages and certainly does not search other files on your server that are not loaded into the browser. "current web page" means the HTML loaded from the current URL in the browser bar.
When a web page is no longer visible in the browser window (e.g it's been replaced by some other page), it is gone and no longer reachable by any Javascript. In some specific cases, you can access document loaded into other tabs or other frames (subject to same-origin security rules and requires a different method of access).
In addition, no changes to a web page are persistent in the browser. As soon as a web page is no longer loaded into an active browser window, it is gone and reloading it again will load the original, unmodified version of that document.
If you want the same code from one page to run in another page, then you must include that same code in the other page. You can want, you can share a reference to the code by putting the code into its own page and then using a <script src="xxx.js"> tag in each page to cause the same code to get loaded into each page.
If interpret Question correctly, try using .load()
$("#container").load("/blog/blog_1.html #testID")
I would like to redirect my website to a mobile version. I have a javascript to do that:
if( /Android|webOS|iPhone|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
window.location.href = "http://m.mysite.com";
}
Could I put this code on Google Tag Manager? Is that a good ideia?
Thanks.
You can put this into GTM using a custom HTML tag that is triggered at page load (you would need to include script tags).
However in my opinion this is not a good idea. GTM is implemented after the opening body tag, which means that before any tags are executed you site loads all assets referenced in the head section (js, css etc.) plus it has to fetch the tag manager script from Google. This introduces a noticable delay before redirecting.
However you could use your script to display a little dialog that asks users if they want to be redirected. If nothing else the dialog would hide the delay (plus some users might prefer the desktop site for whatever reason).
I am interacting with a webpage that I need to have java scripting alternatively disabled and then enabled.
I can't change the scripting setting in the browser to disable scripting since some of the website requires scripting be enable to work properly.
The program I am using allows me to execute a javascript but I can't figure out how to code a script that load a page with javascript disabled.
Any ideas how I can run a javascript to disable scripts on the page?
Thanks for all the feedback - A little more background might help.
I am using a program to create a bot that automates some of my repetitive tasks. The problem is that my program doesn't recognize the links generated by java scripting on the first two pages of the process so I have to have scripting disabled in my browser. Unfortunately on the last and final page of the process scripting is required to render a menu.
I am have request with their development team to change this final page so its viewable without scripts but in the meantime I've still got this problem.
I believe I'll be able to make this work by opening a new browser window, executing the window onload script for the first two steps then going back to a regular window for the final step. I'll let you know if it works.
And yes this is for a personal project and the site owners are aware of my attempts to automate their pages with my software.
You can't disable scripts using javascript.
Disabling javascript is something that is done within the browser configuration.
If your script is run outside the browser, you may be able to point it at 2 different browsers, one that has javascript enabled and one that doesn't.
Alternatively, some browsers (Firefox) have the notion of "Profiles" that you can start directly - so you could have one profile with javascript enabled and one without it.
The only way you could force a reload without Javascript is via a meta-refresh in the page's <head> block:
<meta http-equiv="refresh" content="600;url=http://address.to.your/page" />
or output some text to tell people to "click here to refresh".
Basically you're asking "how can I drive my car somewhere after I remove the engine".
You could look into an add-on for your browser that disables scripts.
Particularly one that can disable them on only a few pages per website, and not the whole site.
...with great difficulty!
However, if you can put this right at the top of the document (preferably inside an if statement acting upon whatever trigger you're using to enable/disable JavaScript):
<script>
window.onload = function()
{
var contents = document.getElementsByTagName('XMP')[0].innerHTML;
contents = contents.replace(/<script/gi, '<xscript');
contents = contents.replace(/<\/script/gi, '</xscript');
contents = contents.replace(/ on([a-z]+=)/gi, ' *$1');
document.open();
document.write(contents);
document.close();
}
document.write("<xmp>");
</script>
That just might do the job. Except for JavaScript running in IFRAMES and things like that. And except for the unlikely scenario that you're actually using the lesser-spotted XMP element somewhere within your pages.
Not working in Safari. Is this just for your own personal use?