Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

✨ Reload page on self redirect if hash is not present in DOM #37920

Closed
Show file tree
Hide file tree
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Next Next commit
Reload page on self redirect if hash is not present in DOM
  • Loading branch information
deepaklalwani97 committed Mar 16, 2022
commit d96825ab63e876f3860e7e1061da4d46d0877970
9 changes: 9 additions & 0 deletions build-system/server/app.js
Original file line number Diff line number Diff line change
Expand Up @@ -319,6 +319,15 @@ app.use('/form/redirect-to/post', (req, res) => {
res.end('{}');
});

app.use('/form/redirect-to/self', (req, res) => {
cors.assertCors(req, res, ['POST'], ['AMP-Redirect-To']);
res.setHeader(
'AMP-Redirect-To',
'http://localhost:8000/examples/forms.amp.html#dummy'
);
res.end('{}');
});

app.use('/form/echo-json/post', (req, res) => {
cors.assertCors(req, res, ['POST']);
const form = new formidable.IncomingForm();
Expand Down
13 changes: 13 additions & 0 deletions examples/forms.amp.html
Original file line number Diff line number Diff line change
Expand Up @@ -697,6 +697,19 @@ <h4 id="header3">Redirect After POST (works only if running on localhost)</h4>
</fieldset>
</form>

<h4 id="header3">Self Redirect After POST with reload. (works only if running on localhost)</h4>
<form method="post"
action-xhr="http://iframe.localhost:8000/form/redirect-to/self"
target="_top">
<fieldset>
<label>
<span>Send us a message</span>
<input type="text" name="message" id="message1" required>
</label>
<input name="submit-button" type="submit" value="Send">
</fieldset>
</form>

<h4>Recursive Event-Action-Event-Action Test - Should only submit once</h4>
<form method="post"
id="myform"
Expand Down
41 changes: 41 additions & 0 deletions extensions/amp-form/0.1/amp-form.js
Original file line number Diff line number Diff line change
Expand Up @@ -1176,7 +1176,48 @@ export class AmpForm {
}
const navigator = Services.navigationForDoc(this.ampdoc_);
navigator.navigateTo(this.win_, redirectTo, REDIRECT_TO_HEADER);

if (this.shouldReload_(redirectTo)) {
window.location.reload();
}
}
}

/**
* Checks whether to reload the page in case of self redirect and
* URL fragment does not exists in the DOM.
*
* @param {string} redirectTo
* @return {boolean}
*/
shouldReload_(redirectTo) {
const currentURI = this.cleanURI(window.location.href);
const redirectURI = this.cleanURI(redirectTo);

if (currentURI !== redirectURI || redirectTo.indexOf('#') === -1) {
return false;
}

const hash = redirectTo.substring(
redirectTo.indexOf('#'),
redirectTo.length
);

// Bail out if the URL fragment is empty.
if (hash.length <= 1) {
return false;
}

return document.querySelectorAll(hash).length < 1;
}

/**
* Remove fragments from the URI.
* @param {string} url
* @return {string}
*/
cleanURI(url) {
return url.indexOf('#') > 0 ? url.substring(0, url.indexOf('#')) : url;
}

/**
Expand Down