Category: JavaScript Answers

Categories
JavaScript Answers

How to save JavaScript objects in sessionStorage?

Labrador retriever puppy walking on green grass

Sometimes, we want to save JavaScript objects in sessionStorage.

In this article, we’ll look at how to save JavaScript objects in sessionStorage.

How to save JavaScript objects in sessionStorage?

To save JavaScript objects in sessionStorage, we convert the object to a string before saving it.

For instance, we write

const user = { name: "jane" };
sessionStorage.setItem("user", JSON.stringify(user));
const obj = JSON.parse(sessionStorage.user);

to call JSON.stringify with user to convert user to a JSON string.

Then we call setItem to save the string with key 'user'.

And then we can get the value and parse it back to an object with

JSON.parse(sessionStorage.user)

Conclusion

To save JavaScript objects in sessionStorage, we convert the object to a string before saving it.

Categories
JavaScript Answers

How to capture iframe load complete event with JavaScript?

Labrador retriever puppy walking on green grass

Sometimes, we want to capture iframe load complete event with JavaScript.

In this article, we’ll look at how to capture iframe load complete event with JavaScript.

How to capture iframe load complete event with JavaScript?

To capture iframe load complete event with JavaScript, we can set the onload property of the iframe to a function that runs when the iframe content finishes loading.

For instance, we write

const iframe = document.createElement("iframe");
iframe.onload = () => {
  console.log("iframe loaded");
};
iframe.src = "...";
document.body.appendChild(iframe);

to select the iframe with createElement.

Then we set its onload property to a function that runs when the iframe content is loaded.

And then we set the src property of the iframe to load it.

Conclusion

To capture iframe load complete event with JavaScript, we can set the onload property of the iframe to a function that runs when the iframe content finishes loading.

Categories
JavaScript Answers

How to simulate target=”_blank” in JavaScript?

Labrador retriever puppy walking on green grass

Sometimes, we want to simulate target="_blank" in JavaScript.

In this article, we’ll look at how to simulate target="_blank" in JavaScript.

How to simulate target="_blank" in JavaScript?

To simulate target="_blank" in JavaScript, we call the window.open method.

For instance, we write

window.open("http://www.example.com", "_blank");

to call window.open to open http://www.example.com.

We call it with '_blank' to show the page in a new window.

Conclusion

To simulate target="_blank" in JavaScript, we call the window.open method.

Categories
JavaScript Answers

How to create an iframe with given HTML dynamically with JavaScript?

Labrador retriever puppy walking on green grass

Sometimes, we want to create an iframe with given HTML dynamically with JavaScript.

In this article, we’ll look at how to create an iframe with given HTML dynamically with JavaScript.

How to create an iframe with given HTML dynamically with JavaScript?

To create an iframe with given HTML dynamically with JavaScript, we can use the createElement method.

For instance, we write

const iframe = document.createElement("iframe");
const html = "<body>hello world</body>";
document.body.appendChild(iframe);
iframe.contentWindow.document.open();
iframe.contentWindow.document.write(html);
iframe.contentWindow.document.close();

to call createElement to create an iframe.

Then we call appendChild to append the iframe as child of the body element.

Next, we call iframe.contentWindow.document.open to open the iframe for writing.

Then we call iframe.contentWindow.document.write with html to write the html content to the iframe.

Finally, we call close to stop writing.

Conclusion

To create an iframe with given HTML dynamically with JavaScript, we can use the createElement method.

Categories
JavaScript Answers

How to get query string parameters URL values with JavaScript?

Labrador retriever puppy walking on green grass

Sometimes, we want to get query string parameters URL values with JavaScript.

In this article, we’ll look at how to get query string parameters URL values with JavaScript.

How to get query string parameters URL values with JavaScript?

To get query string parameters URL values with JavaScript, we can use the URLSearchParams constructor.

For instance, we write

const urlParams = new URLSearchParams(window.location.search);
console.log(urlParams.get("action"));

to get the query string from the current page’s URL with window.location.search.

Then we call get with the key of the query parameter we want to get to return its value.

Conclusion

To get query string parameters URL values with JavaScript, we can use the URLSearchParams constructor.