DOMException: Access to property "apply" on a cross-origin object has been denied

Over the last day, I've been tackling the FreeCodeCamp assignment "quote machine". Everything is working fine except for the tweet button. You can tweet as many times as you like for one single quote, but not for multiple quotes (once you tweet one, you can't move on to the next quote and tweet that).

When I try to open a new window, I encounter the following error:

DOMException: Permission denied to access property "apply" on cross-origin object

I've been researching this error for a while now, but I haven't found a solution that I can implement.

Here's the project (it's quite small)

snip

// snip
methods:{
  twitter() {
    this.twitter = window.open('https://twitter.com/intent/tweet/?text='+this.quote+'&hashtags=quotes');
  },
  refreshQuote() {
    // etc
<a @click="refreshQuote">
///
</a>
<v-btn fab depressed outline large class="center" @click="twitter">

The reason I'm using tweet() is because I couldn't get window.open to work with @click; I received the error:

Error in event handler for "click": "TypeError: window is undefined"

Thank you.

Answer №1

section, there is a noteworthy point about assigning a window handle from the return value of window.open() to this.twitter in your code, which was originally your twitter method. It is recommended to not retain a reference to the opened window, so the suggested code modification is as follows: twitter() { window.open(`https://twitter.com/intent/tweet/?text=${encodeURIComponent(this.quote)}&hashtags=quotes`) } Furthermore, there is a mention of malformed HTML in the content with some closing tags appearing out of order. It is advised to rectify this issue. For a better understanding, you can visit https://codepen.io/anon/pen/RyJBXa

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

organize and identify a JSON data using sorting and matching techniques

Having a JSON structure as shown below: [ { "id": "1", "freq": "1", "value": "Tiruchengode", "label": "Tiruchengode" }, { "id": "2", "freq": "1", "value": "Coimbatore", "label": " ...

Zero's JSON Journey

When I make an HTTP request to a JSON server and store the value in a variable, using console.log() displays all the information from the JSON. However, when I try to use interpolation to display this information in the template, it throws the following er ...

Nested modal in native app utilizes the React Carbon TextInput component for an uneditable input field

As a newcomer to React, I have encountered an issue with the Tauri framework used to bundle my React application as a desktop app. Specifically, I am facing a problem where the TextInput field, nested inside a modal and utilizing React Carbon components, i ...

Identifying instances where the AJAX success function exceeds a 5-second duration and automatically redirecting

Greetings! I have created a script that allows for seamless page transitions using Ajax without reloading the page. While the script functions perfectly, I am seeking to implement a feature that redirects to the requested page if the Ajax request takes lo ...

Customizing CSS based on URL or parent-child relationship in WordPress

I'm having trouble finding a solution for what seems like a simple issue... Currently, my header has a border-bottom and I'd like to change the color of this border based on the section the user is in. For example, consider these parent pages: ...

Running complex operations within a sorting function just once

I am facing the challenge of sorting an array of objects based on multiple date fields, with the added complexity of excluding certain dates depending on the category. In order to optimize performance, I want to minimize the number of times the getUsefulJo ...

I'm facing an issue with this error message - DiscordAPIError: Unable to send a message that is empty. How can I

What's the solution to this issue? Error: UnhandledPromiseRejectionWarning: DiscordAPIError: Cannot send an empty message Code: let y = process.openStdin() y.addListener('data', res => { let x = res.toString().trim().split(/ +/g) ...

The menu item fails to respond to clicks when hovering over the header background image

I'm having an issue with the Menu Link not working. I can click on the menu item when it's placed inside the body, but when I try to place it over the background header image, it stops working. Any help would be greatly appreciated. <div clas ...

The structure of a project using a Vue app and a Node API

Seeking your thoughts on combining a Vue App with a Node using API for my upcoming project. I have set up two separate folders for the client (VueJs) and server (Node) locally: - client (VueJs) - server (Node) I am currently running them individually usi ...

Show an Array of Nested JSON API information on an HTML page using jQuery/JavaScript

Recently, I've delved into the world of jQuery, JavaScript, and AJAX while experimenting with an API that I designed. The backend result I received looks like this: [ { "id": 1, "choice_text": "They work on List View generally", ...

The most secure method for retrieving User Id in AngularFire2

I'm currently facing a dilemma in determining the most secure method to obtain an authenticated user's uid using AngularFire2. There seem to be two viable approaches available, but I am uncertain about which one offers the best security measures ...

Modifying a css class via javascript

Is it possible to set an element's height using CSS to match the window inner height without directly modifying its style with JavaScript? Can this be achieved by changing a CSS class with JavaScript? One attempted solution involved: document.getEle ...

When I set the width of my script to 100% in CSS, it causes the width to become distorted

I encountered an issue with my Div Slider that swaps out Divs on click. When I modified the CSS to include the following: .hslide-item {width: 100%}; The script started ignoring the entire div width. I am looking for a solution where the .hslide-item ca ...

Using JQuery Datatables to output HTML based on JavaScript conditional logic

I am presently working on a project that involves using JQuery Datatables to display my data. Within this project, I am utilizing the datatables render method to format the data before it is displayed. However, I have encountered a challenge where I need t ...

A step-by-step guide on transferring data from an HTML file to MongoDB using Python Flask

I am currently developing a web application that involves uploading multiple CSV files and transferring them to MongoDB. To build this application, I have utilized Python Flask. To test out different concepts for the application, I have created a sample f ...

Guide on parsing an Array of arrays using JSON.parse

I have received a JSON.stringified Array of arrays in a variable named request. alert(request); When I alert the above, I get the following message: "[[\"0\",\"MahaShivRatri\"],[\"0\",\ ...

Exploring the functionality of the instanceof operator in Javascript

I'm currently developing a Node.js application and the project structure is as follows: [Project Folder] | |---[plc] | |--- plc.js | |--- scheduler.js | |---[source] | |--- source.js | |---[test] |--- test.js Th ...

Having trouble targeting a div with jQuery

Is it possible to target a specific div within an unordered list and list items? I'm having trouble with it. Here is the HTML code: <ul class="grid"> <div id='categoria' cat='web'></div> <li id=' ...

"Error encountered while trying to perform a JavaScript _doPostBack

In my asp.net application, I have an HTML table where each td element has a unique id. When a td element is clicked, I use JavaScript to store the id in a hidden field. After that, I attempt to trigger _doPostBack from JavaScript to utilize the hidden fiel ...

Problem with detecting collisions algorithm

Here is the jsfiddle I've been working on: http://jsfiddle.net/TLYZS/ Upon debugging the code and inspecting the collision function, it's evident that the collision is functioning properly when the user overlaps with the other character. However ...