Document.titles while using html templates? - javascript

So I'm dynamically filling a small set of template pages with dynamic data from a DB, with the dynamic inputs contained in the URL params.
I'm using a URL rewriter(mod_rewrite) to create static-looking URLs for these template pages, but I'd really like to have the page titles be dynamic too.
I've found out how to do this in javascript after the page has been loaded, but apparently that won't work correctly for SEO, or for links to the page.
The main example I have, is that the wiki page for genome.
http://en.wikipedia.org/wiki/genome
… is rewritten to:
http://en.wikipedia.org/w/index.php?title=genome
Yet the page title will be Genome - Wikipedia, instead of Template - Wikipedia.
How does wikipedia dynamically rename the page title? Somehow I doubt they create new static html pages for every single article, they probably use a template.
Is there any way to have a parameter be assigned to the page title?
Thanks in advance.

You can always write javascript to rename the page title from the argument;
document.title = "This is the new page title.";
How to dynamically change a web page's title?

Related

Extracting data from a web page and inserting into html code of another webpage

I have multiple webpages that only contain a single number in the HTML code, nothing else. These get updated from an IOT device I made. I also have a main data webpage, that is meant to display all of the data on one page. However, I cannot figure out how to extract the number the data webpages' in the HTML code of the main data webpage.
The only workaround I have found is by using iframes, but this seems very clumsy, and not "pleasing for the eyes". Is there any way to do this using HTML, or maybe javascript? I am very new to web development. The only restriction is that I cannot change how the data is uploaded from the IoT device, so it has to be extracted from the individual data webpages that contain only numbers.
Thanks in advance :)
Once you find the Javascript selector for the innerHTML of your iFrame, you can get the value out of the iframe for use within the parent or window:
//Getting a value from the first iframe
//Assumes the page in the iframe only contains a single plaintext value
myValue = document.querySelectorAll('iframe')[0].contentWindow.document.body.innerText;
To make it more appealing you could easily hide the iFrame:
//Hiding the embedded iframes
for (var i=0; i<document.querySelectorAll('iframe').length; i++){
document.querySelectorAll('iframe')[i].style.visibility = "hidden";
};
What you need to do is
Fetch the html pages
Parse the data from each page
Render it to your current page
This is not trivial task, mostly because parsing and handling multiple fetches that may take random amount of time to complete. And browser security restrictions in case the files are in different domains.
It would be better if the individual files were .json files not html files.
Here is a codesandbox with a simple example: https://codesandbox.io/s/sleepy-borg-kuye6?file=/src/index.js
Here is one tutorial:
https://gomakethings.com/getting-html-with-fetch-in-vanilla-js/

How to generate a random URL for a random generated page

Some context on what I want to achieve
My page is generating random content on refresh by using javascript's math.random.
The content will get a lot of different variables including a ton of arrays.
I need to generate an URL or a permalink for the content generated. Like an ID or hash.
First option
Generate the URL first as a seed then generate the content afterwards.
Section option
Generate the page content then get a permalink for the generated content.
Maybe use the arrays in the URL? example.com/ItemItem5Item4Item18
With my lack of knowledge in JavaScript I need more explanation and elaboration. If you could show me some resources or a sample code it would be really appreciated.

Google AMP html - insert amp-iframe without src attribute

I'm trying to run a script inside an AMP page.
There is no page I need to load within the src attribute; my script should inject an <iframe> with the correct src (it is unknown at first load, only received in response to a request made by my script).
Is this possible in AMP?
Disclaimer: I'm open to different approaches to accomplish the same result - injecting an <iframe> with an src attribute within an AMP page.
Thank you
The AMP page cannot contain any javascript in the first place, so this won't work: https://www.ampproject.org/docs/reference/spec.html#html-tags
The only way to achieve your goal is to:
create an iframe with a src attribute pointing to an HTML page you control
in that page load the Javascript that does the work. You can see a similar approach in this example: https://ampbyexample.com/advanced/how_to_create_interactive_amp_pages/
As stated by #ade you can pull this off. Think about it like this.....
You'll have an HTTPS resource that you can hit that will return the blank iframe along with all of the JS code you need to populate the iframe. So basically an entirely functioning page that will be returned to the AMP-IFRAME.
Calling this from the src attribute of an AMP-IFRAME tag will then pull in your page that includes a blank iframe and all of the scripting needed to populate it or manipulate it. So all of your custom code is happening within the AMP-IFRAME tag but all of it's resources live within the embedded iframe tag that the AMP-IFRAME tag pulls in and renders.
We have a custom video player that works very similar to what you are talking about. I created a template that can be hit via HTTPS that returns a page that iframes our video as well as includes all the scripts to play it and manipulate it. It's all contained in a nice neat little package and the only thing required to use the AMP-IFRAME is the script that extends it. Check out all the AMP-FRAME documentation here.
Hope this helps.

Trouble inserting a javascript variable into an HTML tag [duplicate]

I want to add twitter card meta tags to my website. i cannot add static tags since the content attribute in the meta tag has to change dynamically.
Plz help if someone has a solution.
You can't, at least not in any way that Twitter is going to recognise.
When Twitter fetches the page, it is always going to get the meta elements that are in the HTML, never ones added with client side JavaScript.
If you are changing content dynamically then make use of the history API to update the URI, and make sure that the server will generate all the content for each URI when the URI is used as an entry point (you can still use JavaScript to generate the content when moving from another page on the site).
You can generate pages dynamically (server side) as long as you don't intend to change them after. Think about the process in the same way you would build landing pages for SEO purposes. Twitterbot is in many ways really similar to Googlebot and similar indexers.
See https://dev.twitter.com/blog/twitter-cards-tips-tricks for a few examples of sites doing this.

Page Stats always show the name of an IFRAME, and not the real doc name

I have a website with multiple pages. All of the pages have an embedded IFRAME in them (always the same iframe src).
My problem is that the iframe contains some statistical tracking code, (like statcounter), and statcounter only shows the name of the iframe as the page being visited.
Is it possible somehow to include a few lines of javascript to change the filename to make it equal to the main webpage name, so the stats shown on statcounter, show the real HTML name, and not the iframe name??
Any kind soul care to show me what lines of code I could insert to do that?
thanks for any help,
regards,
mango.
From inside the iFrame your javascript would reference parent.document.[whatever you're accessing]. Changing those lines in your tracking code should get you what you're looking for.
To do it conditionally in case your iFrame source isn't always embedded you could write it as:
if (parent){var doc = parent.document;}
else{var doc = document;}
doc.[whatever attribute]

Categories

Resources