In this tutorial, we will learn how to call the parent window function from the child window in javascript.
In some cases, we need to open the child browser window as a modal or dialog. For example, if need to handle and load the redirect URL in a single-page application.
While using third-party services providers for e.g PayPal we are supposed to get the redirect URL to load the payment page for security reasons. In this case, we will load that redirect URL in the child window as a modal and the user will proceed with the payment securely. Once the payment is done we need to notify the parent window or our single-page application that the payment got succeeded or pass some token. In this case, we need to call the parent window function from the child window.
Let's look into the example, where we are passing token from the child window to the parent function.
Here, while opening the child window we will register the function in the document interface that represents any web page loaded in the browser and serves as an entry point into the web page's content
document.responseToken = function (token){
// manuplate the token
}
Now let's add the calling function from the child window.
Here, we are using window.opener The Window interface's opener property returns a reference to the window that opened the window i.e parent window. So we can get the responseToken function that we registered previously. This will pass the token to the reference or parent window. After that window.close() will close the child dialog window.
The Web Share API provides a mechanism for sharing links, text, files, and other content utilizing the sharing mechanisms of the underlying operating system. Note that this API only can be used over the secure connection HTTPS.
Sharing Links and Text Description
Let's create a sample vue component called Share.vue and add the following HTML inside the template which contains a simple button to allow users for sharing.
Here, if the browser supports the API, we are rendering the share button to allow the user to share. If not then we are hiding the button. Now, let's add the data and method used
webShare function allows the user to share link and title and description on different applications of OS.
Sharing Files
webShare() {
let self = this;
fetch("file_url").then(function (response) {
return response.blob()
}).then(function (blob) {
let file = new File([blob], "picture.jpg", {type: 'image/jpeg'});
let filesArray = [file];
if (navigator.canShare && navigator.canShare({files: filesArray})) {
navigator.share({
title: self.title,
text: self.description,
files: filesArray,
url: self.url
});
}
});
}
If we want to share the file, first load the file and test whether the file can be sharable or not, if it is sharable then it will be shared over the available supported application of OS.
In this tutorial, we are going to learn how to create a UTC countdown timer in VueJs. We are UTC time to manipulate the countdown timer so that every user from different locations can see the same countdown.
Let's create a component called CountDownTimer.vue
Now, let's add some HTML and CSS for the countdown timer in the template.
Here, first, create the UTC time when the action will happen i.e for e.g the time when the sale starts. Make sure that the time needs to be UTC time.
const countdownDate = new Date("January 11, 2022 7:59:00").getTime(); // always use UTC time
After that, we are using setInterval() method which repeatedly calls a function or executes a code snippet inside it, with a fixed time delay between each call.
Note there we are using 1000 ms time so that the countdown will refresh in every second.
Let's look into the below code
const now = new Date();
let nowUTC = new Date(
now.getUTCFullYear(),
now.getUTCMonth(),
now.getUTCDate(),
now.getUTCHours(),
now.getUTCMinutes(),
now.getUTCSeconds()
).getTime();
We are getting the current data which gives the current location browser data. We have to convert this to UTC current date. So the user from a different location can see the same countdown
After that, we are calculating distance which will show the countdown is expired or not and days, hours, minutes, and seconds.
If the countdown is expired then we are clearing the setInterval and hiding the countdown and showing some desired text
Start the countdown timer. For this, simply call the startTimer function from created hook.
created() {
this.startTimer();
},
The demo output for this example looks like below:
The HTML file used will show the camera image button to capture the photo. Here, we are using canvas height and width for the photo size. You can always adjust the different size photo by adjusting canvas height and width.
This function simply toggles the camera to capture the photo. And start streaming the video. Let's implement the function used inside this toggleCamer().
startCameraStream() {
const constraints = (window.constraints = {
audio: false,
video: true
});
navigator.mediaDevices
.getUserMedia(constraints)
.then(stream => {
this.$refs.camera.srcObject = stream;
}).catch(error => {
alert("Browser doesn't support or there is some errors." + error);
});
},
The above function will start the camera by using the navigator mediaDevices interface which will access to the connected media input device, in our case its camera. And asign the streaming to canvas dom element to show the video. Here we are setting the constraints as audio is false because we don't need the audio to capture the photo.
When a user clicks the camera button, then it will take the video streaming dom context and captured the 2d photo with the given width and height. We are using the setTimeout because video streaming will take some time to stream.
Let's implement the self.addToPhotoGallery() used in the above function. This is to preview the captured photo. For this, we are using the "vue-picture-swipe" library. So first let's add this to our application.
Finally, using self.uploadPhoto() we can upload the captured picture to the server.
uploadPhoto(dataURL){
let uniquePictureName = this.generateCapturePhotoName();
let capturedPhotoFile = this.dataURLtoFile(dataURL, uniquePictureName+'.jpg')
let formData = new FormData()
formData.append('file', capturedPhotoFile)
// Upload api
// axios.post('http://your-url-upload', formData).then(response => {
// console.log(response)
// })
},
generateCapturePhotoName(){
return Math.random().toString(36).substring(2, 15)
},
dataURLtoFile(dataURL, filename) {
let arr = dataURL.split(','),
mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]),
n = bstr.length,
u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new File([u8arr], filename, {type: mime});
},
generateCapturePhotoName() will generate the unique name for each captured picture, and to send to the server, first we are converting the dataUrl value to file using dataURLtoFile().
The overall implementation of the component Camera.vue looks like as below:
