Get the value of aria-label using an element

1

I'm setting up Disqus comments on my blog, but I have some problems with AMP templates.

To configure Disqus I need an object that has two variables that I filled using Django, like this:

var disqus_config = function () {
  this.page.url = '{{ config.SITEURL }}{{ article.get_absolute_url }}';
  this.page.identifier = '{{ article.idx }}'; 
};

this becomes this:

var disqus_config = function () {
  this.page.url = 'http://localhost:8000/desarrollo/agrupar-resultados-con-mysql/';
  this.page.identifier = 'd09a0882-74a2-4d66-97d8-63e37172a1b4';
};

I am especially interested in the content of this.page.identifier .

Now, to implement Disqus in AMP I must place a page in another domain. This page has a script that loads the comments of Disqus, and that has exactly the same configurations.

My problem is that on that server I do not have access to the Django variables , therefore I must access those values via JavaScript.

The AMP URL ends with ... amp , like this: http://localhost:8000/desarrollo/agrupar-resultados-con-mysql/amp/ , then to get the value of this.page.url which should be the canonical URL I do this:

this.page.url = window.location.href.slice(0,-4);

... and it works, because I see the expected value in the console.

Problem

But I do not know how to get the value of this.page.identifier , so I came up with the following.

I have in my template a main element that is unique and there I will place the UUID in a thing called aria-label , like this:

<main id="content" role="main" class="" aria-label="{{ article.idx }}">

... that transforms into

<main id="content" role="main" class="" aria-label="d09a0882-74a2-4d66-97d8-63e37172a1b4">

Note: I have no reason to use aria-label , it seems to me that it does not interfere with anything on the page and the AMP validator does not complain.

Now in my external script, I do this:

var disqus_config = function () {
  this.page.url = window.location.href.slice(0,-4);
  this.page.identifier =  // NO HAGO NADA PORQUE NO SÉ QUE HACER
};

With this.page.url I have no problems, but I do not know how to get the value stored in aria-label . Well, I do not even know if it's the best place to store that value.

I can locate the element but for its id : idx = document.getElementById("content") , and I see this all , absolutely everything that is between the marks <main> and </main> . But I only want the value of aria-label .

Question

How can I store a value type d09a0882-74a2-4d66-97d8-63e37172a1b4 and how can I retrieve it with a script using only JavaScript in the browser?

Note: I can not use jQuery, only JavaScript.

    
asked by toledano 01.08.2017 в 08:50
source

1 answer

1

If you recover the elmented using the getElementById you can get the value of the attribute with:

document.getElementById('content').attributes["aria-label"].value

But the "aria-label" attribute is not the most appropriate to store this type of information. It would be better (if the validator allows it) that you would use an attribute called data-idx :

<main id="content" role="main" class="" data-idx="{{ article.idx }}">

And you will recover it with:

document.getElementById('content').attributes["data-idx"].value
    
answered by 01.08.2017 / 09:30
source