javascriptdom-eventsamp-htmlamp-story

What is required for publishers to write code that hooks into events in amp-story?


For example, HTML DOM events allow JavaScript to register different event handlers on elements in an HTML document.

Events are normally used in combination with functions, and the function will not be executed before the event occurs (such as when a user clicks a button).

benefits

Although there’s a lack of good documentation, adding a function that takes parameters (i.e. Function_Name(Parameter)) to one of JavaScript’s standard ‘On’ events (i.e. ‘OnClick‘ or ‘onKeyDown‘) is relatively simple for JavaScript coders. Advanced programmers might refer to this as dynamic runtime event assignment with functions using parameters passed.

Let’s say we have a text area field on a web page, and we want to execute some function every time they make a keystroke inside that field. In our real world example, we wanted to count the number of characters, so we could let the user know how close they were to the limit, and warn them when they exceed the limit. To capture keystrokes, we need to hook into JavaScript’s ‘onKeyUp‘ and ‘onKeyDown‘ events.

Experienced JavaScript developers know that the easiest way to add these hooks is to include them in the HTML for the textarea, like so:


Solution

  • It is not currently valid AMP to author pages with JavaScript. See How AMP works, specifically:

    AMP pages can’t include any author-written JavaScript. Instead of using JavaScript, interactive page features are handled in custom AMP elements. The custom AMP elements may have JavaScript under the hood, but they’re carefully designed to make sure they don’t cause performance degradation.

    The next paragraph goes on to say:

    While third-party JS is allowed in iframes, it cannot block rendering. For example, if third-party JS uses the super-bad-for-performance document.write API, it does not block rendering the main page.

    However, amp-story specifically does not allow author-specified iframes.

    As such, I do not believe that what you are requesting here is possible in amp-story's current state.