On my webpage I have an iframe like:
"https://localhost:4200/myroute/mypage.html?name=batman&alias=bruce
What I want is that when I click a button present on the iframe, the iframe reloads with new query parameters I specify (or pass to a function), say
"https://localhost:4200/myroute/mypage.html?name=superman&alias=clark
I want the part before the query params to be unchanged; as I could have this iframe on multiple pages.
Is there any way to achieve this? I browsed through some similar questions on SO, but that didn't help.
Thanks.
PS - I want the solution using pure javascript; no frameworks.
EDIT: I've temporarily gotten it to work with some help from this answer.
var fixedPath = window.location.href.split('?')[0];
window.location.href = `${fixedPath}?name=superman&alias=clark`
This reloads my iframe as required:
Problems: 1) I've no idea if this code is good for different browsers. Or if it violates any good practices.
2) I have to pass all the param keys and values as a string; as against using it from an object like
{
name: 'batman',
alias: 'bruce',
}
Sure, I could traverse the object and store the keys and values in variables which I then use in my string. But that seems convoluted. Are there any APIs which would let me directly specify the value of a particular parameter?
