javascript - How to alter current url in AMP HTML? - Stack Overflow

admin管理员组

文章数量:1025251

In my website, filtering of products is done server side by alterining the URLS, ie. by adding ?q=alpha+beta+gama at the end of the URL if the category is to be filtered for products containing tags alpha, beta & gama

I want to remove "beta" from the url should someone press a button.

Seems easy in non-amp pages by using javascript, but I cant find a way to do it in amp.

Is there a script that can fiind current url and remove some keywords from them based?

I am planning to achieve this with a form. The form will have multiple inputs. On pressing submit button, the input fields in the form will be grabbed and appending to current url. Situation 1:

The current url is website/?view=amp
Desirable url is website/?view=amp&q=alpha+beta+gama

Situation 2

Current url is website/?view=amp&q=alpha+beta+gama+delta
Second desirable URL is website/?view=amp&q=alpha+gama

In my website, filtering of products is done server side by alterining the URLS, ie. by adding ?q=alpha+beta+gama at the end of the URL if the category is to be filtered for products containing tags alpha, beta & gama

I want to remove "beta" from the url should someone press a button.

Seems easy in non-amp pages by using javascript, but I cant find a way to do it in amp.

Is there a script that can fiind current url and remove some keywords from them based?

I am planning to achieve this with a form. The form will have multiple inputs. On pressing submit button, the input fields in the form will be grabbed and appending to current url. Situation 1:

The current url is website./?view=amp
Desirable url is website./?view=amp&q=alpha+beta+gama

Situation 2

Current url is website./?view=amp&q=alpha+beta+gama+delta
Second desirable URL is website./?view=amp&q=alpha+gama

• javascript
• ajax
• amp-html

Share Improve this question Follow edited Apr 21, 2020 at 15:35 Arpan Jain asked Apr 11, 2020 at 18:42 Arpan JainArpan Jain 14611 gold badge66 silver badges2424 bronze badges 2

• 1 This seems a use case for amp-link-rewriter. Have you tried it? – GOTO 0 Commented Apr 21, 2020 at 15:46
• This does not solve my purpose – Arpan Jain Commented Apr 21, 2020 at 15:48

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4 +150

As per your use-case, you can simply use amp-bind to keep updating the URL in case user adds/changes default input value.

e.g.

<label>Username
    <input name="username" on="change:AMP.setState({name: event.value})"/>
</label>
<a href="example./default-url" [href]="'example./default-url?name=' + name">Submit</a>

So, you need to provide a default URL as href value by default and [href] will update the default URL when any change on the input box is made (amp-bind works only when elements having AMP actions are triggered, remove). You can read more about the actions(i.e. any change) for making URL change here.

We can't read current url and manipulate it in AMP.

What is solution to create dynamic url (or links) in AMP?

We should have a state strategy to create dynamic url in AMP. We should render default state in server side and create dynamic url when states change. for example:

Default states (rendered in server side):

<amp-state id="filters">
  <script type="application/json">
    {
      "alpha": "",
      "beta": "",
      "gama": ""
    }
  </script>
</amp-state>

Dynamic url base on states:

<a href="website./?view=amp" data-amp-bind-href="'website./?view=amp&q=' + filters.alpha + (filters.beta ? '+' + filters.beta : '') + (filters.gama ? '+' + filters.gama : '')">dynamic link</a>

In my website, filtering of products is done server side by alterining the URLS, ie. by adding ?q=alpha+beta+gama at the end of the URL if the category is to be filtered for products containing tags alpha, beta & gama

I want to remove "beta" from the url should someone press a button.

Seems easy in non-amp pages by using javascript, but I cant find a way to do it in amp.

Is there a script that can fiind current url and remove some keywords from them based?

I am planning to achieve this with a form. The form will have multiple inputs. On pressing submit button, the input fields in the form will be grabbed and appending to current url. Situation 1:

The current url is website/?view=amp
Desirable url is website/?view=amp&q=alpha+beta+gama

Situation 2

Current url is website/?view=amp&q=alpha+beta+gama+delta
Second desirable URL is website/?view=amp&q=alpha+gama

In my website, filtering of products is done server side by alterining the URLS, ie. by adding ?q=alpha+beta+gama at the end of the URL if the category is to be filtered for products containing tags alpha, beta & gama

I want to remove "beta" from the url should someone press a button.

Seems easy in non-amp pages by using javascript, but I cant find a way to do it in amp.

Is there a script that can fiind current url and remove some keywords from them based?

I am planning to achieve this with a form. The form will have multiple inputs. On pressing submit button, the input fields in the form will be grabbed and appending to current url. Situation 1:

The current url is website./?view=amp
Desirable url is website./?view=amp&q=alpha+beta+gama

Situation 2

Current url is website./?view=amp&q=alpha+beta+gama+delta
Second desirable URL is website./?view=amp&q=alpha+gama

• javascript
• ajax
• amp-html

Share Improve this question Follow edited Apr 21, 2020 at 15:35 Arpan Jain asked Apr 11, 2020 at 18:42 Arpan JainArpan Jain 14611 gold badge66 silver badges2424 bronze badges 2

• 1 This seems a use case for amp-link-rewriter. Have you tried it? – GOTO 0 Commented Apr 21, 2020 at 15:46
• This does not solve my purpose – Arpan Jain Commented Apr 21, 2020 at 15:48

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4 +150

As per your use-case, you can simply use amp-bind to keep updating the URL in case user adds/changes default input value.

e.g.

<label>Username
    <input name="username" on="change:AMP.setState({name: event.value})"/>
</label>
<a href="example./default-url" [href]="'example./default-url?name=' + name">Submit</a>

So, you need to provide a default URL as href value by default and [href] will update the default URL when any change on the input box is made (amp-bind works only when elements having AMP actions are triggered, remove). You can read more about the actions(i.e. any change) for making URL change here.

We can't read current url and manipulate it in AMP.

What is solution to create dynamic url (or links) in AMP?

We should have a state strategy to create dynamic url in AMP. We should render default state in server side and create dynamic url when states change. for example:

Default states (rendered in server side):

<amp-state id="filters">
  <script type="application/json">
    {
      "alpha": "",
      "beta": "",
      "gama": ""
    }
  </script>
</amp-state>

Dynamic url base on states:

<a href="website./?view=amp" data-amp-bind-href="'website./?view=amp&q=' + filters.alpha + (filters.beta ? '+' + filters.beta : '') + (filters.gama ? '+' + filters.gama : '')">dynamic link</a>

本文标签： javascriptHow to alter current url in AMP HTMLStack Overflow