When using Cordova, iframe target links will not automatically open in the system browser, or possibly not open at all

My app, created using Quasar and vue.js, incorporates a standard Google Map iframe (Google Embed API). The app is designed to function as a regular web app, PWA, and Cordova app.

In the web/pwa versions, clicking on the "open larger map" link provided by Google opens a new window, exactly as intended. However, in the Cordova version, these links do not open in the system browser like all the other external links do without any problems. It's puzzling why this behavior differs between the web/pwa and Cordova versions, especially since both should work with target='_blank' to open links in the system browser (which is already present in Google's link).

It seems likely that the issue has something to do with the fact that it is within an iframe, but it remains unclear why it works correctly in web/pwa but not in Cordova.

Below are the code snippets from the source of the Cordova and Web apps:

Web:

<iframe src="https://www.google.com/maps/embed/v1/place?key=xxx&amp;q=2925+Euclid+Avenue%2CCleveland%2COH%2C44115" allowfullscreen="allowfullscreen" style="border: 0px none; height: 400px;" width="100%" frameborder="0"></iframe>

Cordova:

<iframe width="100%" frameborder="0" src="https://www.google.com/maps/embed/v1/place?key=xxx&amp;q=2925+Euclid+Avenue%2CCleveland%2COH%2C44115" style="border: 0px; height: 250px;"></iframe>

Any thoughts on how to resolve this issue?

javascriptioscordovavue.jsquasar-framework

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

Guide on setting up a Quasar Framework boot file for integrating vueI18n@next using the Vue Composition API

We are currently working on installing the latest vueI18n@next package in Quasar Framework to be used with Vue 2 and the Vue Composition API. The documentation for Vue I18n provides the following code snippet: import { createApp } from 'vue' impo ...

vue.jsvuejs2vue-componentquasar-frameworkvue-composition-api

Improving React code by using conditional statements such as IF and Else

Currently, I am delving into the world of React and have managed to devise some logic for rendering a DIV. However, upon reflection, it has become evident that there is redundancy present in my code structure and I am uncertain about how to efficiently ref ...

javascriptreactjsrefactoring

Utilize array in Laravel view with VueJS

When using Laravel, I have a ProdoctController and CategoryController. In the ProdoctController, I am passing category data with the following function: public function view(){ $category = Category::all(); return view('admin.product.main',[& ...

arrayslaravelvue.js

What is the method of updating content on a webpage without altering the page itself or using hashed URLs?

I have a good understanding of how to update webpage content through AJAX and loading remote content. However, I recently came across UStream's innovative new layout. When you click on any video, not only does the content change seamlessly without rel ...

javascriptajaxurlnavigation

Enhance the efficiency of highcharts when handling extensive datasets

I am looking to extract a higher volume of data. Here is a snippet of the sample data: 1850/01 -0.845 -0.922 -0.748 -1.038 -0.652 -1.379 -0.311 -1.053 -0.636 -1.418 -0.272 1850/02 -0.043 -0.113 0.047 -0.244 0.159 -0.613 ...

javascriptjqueryhighcharts

The functionality of a Google chart is determined by the value of the AngularJS $scope

I recently started working with AngularJS and Google charts. I've successfully created a Google chart using data from AngularJS. It's functioning properly, but now I want to make the chart dynamic based on my Angular Scope value. I have a filter ...

javascriptangularjscharts

"Exploring the Best Locations to Incorporate Plugins in VueJS Webpack

I am trying to incorporate Webpack provided Plugins in order to utilize JQuery globally. Some resources suggest You should add it in the webpack.config.js file under plugins:[] section. However, upon examining my webpack.config.js, I noticed that there ...

javascriptwebpackvue.jsvuejs2

Auto-populate AngularJS form using PHP array via JSON and $http

I came across a fantastic autocomplete feature in this plunker that I need to replicate using a PHP array with $http. When I tried adding an alert to check my array, it worked perfectly. However, I'm stuck on how to implement the filter in AngularJS. ...

javascriptphpjqueryjsonangularjs

Uploading files with Vue.js bindings

Encountering an issue while attempting to upload a file using the Vue Upload Component, particularly with binding variables for selection. The specific component being utilized is available at https://github.com/lian-yue/vue-upload-component. I have foll ...

vue.jsvue-component

How can I make a method in VueJS wait to execute until after rendering?

There is a button that triggers the parse method. parse: function() { this.json.data = getDataFromAPI(); applyColor(); }, applyColor: function() { for (var i=0; i<this.json.data.length; i++) { var doc = document.getElementById(t ...

javascriptvue.jsvuejs2

Creating a D3js line chart by inputting JSON data with d3.json

Since delving into the world of D3.js, I have encountered some challenges. Here is a summary of what I have experimented with so far: Below is my JavaScript code: d3.json("../js/sample2.json", function(data) { var canvas = d3.select("body").append("s ...

javascriptjsonsvgd3.jshtml5-canvas

Differences between Public and Src Directories in Vue-CLI

When setting up a project with vue-cli, the default directory organization includes a 'public' directory and 'src' directory. Within the public directory is the index.html file. What is the rationale behind storing index.html in the pub ...

vue.jsvue-cli-3

Extract information from Firebase and display it in a React component

I am trying to extract and display data retrieved in componentDidMount. Here is the state setup: constructor(props) { super(props); this.state = { loading: true, data: [] } } and here is the componentDidMount function: compo ...

javascriptreactjs

What are some strategies for establishing communication between sibling components in Vue?

Currently, my Vue app has a structure that includes a "blackout" component for displaying modals and a router-view for various sub-menus. These components are siblings at the same level. <blackout v-if="this.popup.currentPopup"></blacko ...

javascriptvue.js

Using Vue.js as a view engine for ExpressJS

I'm on the hunt for a solution similar to React for ExpressJS, but tailored for Vue.js instead. Currently, I'm facing challenges when it comes to passing data from my database (mongoose) to my view. Right now, I'm utilizing the handlebars v ...

javascriptnode.jsexpressmongoosevue.js

Has the user notifications (local) been rescheduled?

When I use unusernotificationcenter to schedule a local notification and the user subsequently turns off notifications for my app, it is evident that my notification will not be delivered. However, if the user later enables notifications for my app, will ...

iosnotificationsunusernotificationcenter

Utilizing Next.js - retrieving URL parameters on the server end

I am currently working on building a frontend using the official with-apollo example for Next.js. My goal is to utilize the user's slug, which can be extracted from the URL string, in order to display the user profile. However, I am facing challenges ...

javascriptreactjsnext.jsapollo

Having trouble with updating your website asynchronously through code? In need of a detailed explanation?

Here are two Javascript functions that are used to call a python file in order to update an HTML page. The first function works perfectly fine, but the second one seems to be malfunctioning without throwing any errors. function button(key) { var xhttp ...

javascriptpythonhtmlcssajax

What could be causing the issue of messages not displaying while incorporating connect-flash with res.locals in express.js and ejs templating?

Here are some snippets of code that may be useful. Connect-flash is designed to display messages on test1 and test2, but there seems to be an issue with displaying messages for test 3: user registration when all three tests are redirected to the same &apos ...

javascriptnode.jsexpressejsconnect-flash

Unable to direct to the main page in index.js of the next.js application

I have been working on a next.js application and encountered an issue with a component I created called <ButtonGroup>. I added a button with the code <Button href="index">Home</Button> to allow users to navigate back to the home ...

javascriptreactjsnext.jsreact-bootstrap