Unable to invoke functions in the child window

In my Vue page, I have a script that opens a child window using the code snippet below:

this.presentation = window.open(
    this.$router.resolve({name:'presentation'}).href,
    'child window',
    'width=auto,height=auto'
);

The above code works perfectly fine, but now I need to access and call its methods. I attempted to access them like this:
Parent:

this.presentation.setPage(0);

Child component:

export default {
  name: 'Presentation',
  data() {
    return {
      page: null
    }
  },
  methods: {
    setPage(_page) {
      this.page = _page;
    }
  }

However, when I try to call the child method, I encounter the following error message:

TypeError: "this.presentation.setPage is not a function"

Why am I unable to call the child's methods? How can I resolve this issue?

Answer №1

According to the specifications for the window.open() method:

windowName

It is important that the name does not include any whitespace characters.

Return value:

The method returns a Window object that represents the newly created window.

The property this.presentation contains a Window object, not a Vue object. Therefore, it does not have the setPage() method.

You might be able to achieve your desired functionality in your child component by implementing something similar to the following:

{
  mounted() {
    window.setPage = (page) => this.setPage(page);
  }
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Struggle with registering fonts in Canvas using JavaScript

I've been struggling to add a custom font to my canvas for hosting the bot. Even though I'm not encountering any errors, the font fails to display on the host. Below is the code snippet: const { AttachmentBuilder } = require('discord.js&apos ...

Conceal the div class upon clicking it

I'm dealing with a list of videos and I need to hide the class when it's clicked. Check out this sample HTML output: <div id="primary-video"> <iframe id="video" width="100%" height="auto" src="https://www.youtube.com/embed/test" fra ...

suggestions for organizing data in an AJAX/jQuery page

Welcome to my JavaScript/Ajax webpage that also utilizes jQuery. I am facing a challenge with displaying a nested structure. Once a top level element is displayed, users should be able to click on it and reveal the levels below (which are dynamically gene ...

Having trouble invoking an established route within a different route in an Express JS project

While working with an Express JS application connected to a mySQL database, I encountered an issue when trying to fetch data from a pre-defined route/query: // customers.model.js CUSTOMERS.getAll = (result) => { let query = "SELECT * FROM custo ...

Are there other options besides Chrome Frame for enhancing Raphael performance on Internet Explorer?

Currently, I am using Raphael 2.1 to simultaneously draw 15 lines, each consisting of 50 two-pixel paths. The performance is optimal in Safari and Chrome, acceptable in Firefox, subpar in Opera, and struggles in IE9. Despite Microsoft's claim that SVG ...

How can I use D3.js to form a circular group in an organization structure, link it with a circular image, and connect

Is it possible to create a radial grouped circle using d3.js, similar to the image below: I have written some code as shown below. However, I am facing challenges in connecting every circle with a curved line and displaying a tooltip when hovering over a ...

What is the process for incorporating an array of models?

let userData = await db.user.findOne({ attributes: attributes, include: ['charges', 'availability', 'practice',// 'services', 'education',// 'user_role', ...

Make sure that the iframe loads the next page with enough force to break out

My dilemma involves an iframe that loads the new tab page. When a user clicks on the thumbnail, it opens within the iframe. My goal is to have any subsequent load in the iframe redirected to window.top. Is there a way to achieve this without manually setti ...

Filtering in JavaScript can be efficiently done by checking for multiple values and only including them if they are not

In my current coding challenge, I am attempting to create a filter that considers multiple values and only acts on them if they are not empty. Take the following example: jobsTracked = [ { "company": "Company1", ...

Conduct a text search within mongoDB to retrieve the corresponding reference document for every item stored in the collection

I am in the process of developing a search functionality for a collection of trips. This search feature will check if the trip includes specific city names (origin and destination). Each trip entry contains the user ID of the person who created it. The sea ...

Transform arrays within arrays to objects

I've been struggling to convert a nested array like the one below: var array = [ [['firstName', 'Henry'], ['codeName', 'Etta'], ['email', '<a href="/cdn-cgi/l/email-protection" class="__cf ...

Guide on incorporating Bootstrap JS into HTML5 reusable web elements

RESOLVED: the solution is in a comment TL;DR: Issues triggering Bootstrap's JS, likely due to incorrect import of JS scripts I've been working on integrating Bootstrap with my custom reusable web components across all pages. Specifically, I&apo ...

Error: The jQuery TableSorter Plugin is unable to access property '1' as it is undefined

I've been attempting to utilize the jquery table sorter plugin, but I keep encountering an error when trying to sort the table. The error message I'm receiving is: cannot read property '1' of undefined This is the HTML code I have: ...

If the iframe's CSS source is updated, the parent's CSS source will also change

I'm currently working on a unique school project that involves creating multiple CSS styles for different views. <link rel="stylesheet" type="text/css" href="css/main.css" title="main" media="screen"> <link rel="stylesheet" type="text/css" h ...

Ways to activate v-input-file using a v-btn

I am trying to activate a hidden v-input-file by clicking on a v-btn. Although I have successfully achieved this with a regular input file, I would prefer to use v-input-file. Here is the code I have implemented so far, but it does not seem to be working ...

Acquiring the index of a selector event within a list of dynamic elements

I am seeking guidance on how to go about solving the issue of obtaining an event index. I have a hunch that closures might play a role in the solution and would appreciate some insights. Initially, I dynamically build an HTML5 video container using an aja ...

I'm having trouble getting my application to output to the console. What could be the issue?

In my cr-route.js file, I have a function that ensures the user is authenticated before displaying their name. module.exports = function (app, passport) { // ===================================== // HOME PAGE (with login links) ======== // == ...

I am struggling to see any results display when using the v-for directive in my Vue.js project

I've developed an application where users can leave comments on each other's profile pages, but I'm encountering issues with displaying these comments. Despite using v-for, the output on the screen shows {{ comment.from }} and {{ content.fro ...

How can I use AJAX to automatically populate a dropdown menu with cities in a PHP MVC application?

Within a PHP MVC setup, there is a file named city.php in the model section which defines a city class. The city class contains a method called getCitiesByProvince('ProvinceId') that retrieves all cities for a given province. When a user picks ...

Uploading a Node.js Package to GitHub Packages - Issue ENEEDAUTH

Hello everyone, I am currently attempting to deploy my NPM package to GitHub packages using the following yaml configuration: # This workflow will run tests using node and then publish a package to GitHub Packages when a release is created # For m ...