Cordova: displaying websites in a webview

When loading an external website with different HTML files in an iframe within a Cordova webview on iOS, I encountered an issue. Whenever I click on a link within the iframe that points to another HTML page, it opens in the Safari browser instead of changing the location inside the iframe.

To work around this problem, I had to overwrite the click action using the following code:

$('a').click(function(event){
    event.preventDefault();
    window.location.replace($(this).attr('href'));
}

While this solution works, it's not ideal. I'm looking for a way to prevent Cordova from opening links in the external Safari app. Is there a configuration setting in the config.xml file that can help me achieve this?

javascriptcordovaiframecordova-plugins

Answer №1

To solve the issue, consider using the cordova-plugin-whitelist plugin:

Visit this link for more information

By implementing a whitelist policy, this plugin enables secure navigation within Cordova 4.0 webview.

In your config.xml file, include something like the following:

<allow-navigation href="http://example.com/*" />

...for each legitimate domain that you trust. In this case, 'example.com' represents one of the trusted domains.

Answer №2

For a different approach, consider using window.open instead of window.location.replace, and specify _self as the target.

window.open($(this).attr('href'), "_self");

Check out more information here!

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

Differences Between DOM and Refs in React

When it comes to React, what distinguishes the use of DOM from Refs? While it is possible to utilize typical JavaScript DOM node selectors in React for targeting specific elements, refs also offer a way to achieve the same functionality. What are the adv ...

javascriptreactjsdomreact-dom

Exploring the realms of Django Administrator with external JavaScript integration

Currently, I am working with django 2.0 that includes jquery 2.2.3. My goal is to implement the ImageViewer Javascript app (https://github.com/s-yadav/ImageViewer) on one of my admin pages. I have added the necessary js and css files to the Media class wit ...

javascriptjquerydjango

Create a distributive and an NPM package using one source code

Creating small open source tools is a passion of mine, and I strive to provide the best experience for my users. My packages usually consist of just one function, so here's what I aim to offer: A JavaScript file that users can easily add by including ...

javascriptnpmwebpackgulppackage

JS if clause fails to return true as expected

Here is my setup: <div id="user_input">...</div> And a button: <input type="button" id="panel_button">...</button> Using a selector: function $(id) { return document.querySelector(id); } With an event handler: var button_ ...

javascripthtmlcssanimation

"The position of the Textbox shifts suddenly following the input of text

One interesting quirk I've noticed in my HTML code is that a text box with a jQuery button attached to it seems to shift down by about 4 pixels when the user enters text and then moves away from the box using the tab key or mouse. <div class=&apos ...

javascriptjqueryhtmlcss

Trouble arises when attempting to transfer cookies between server in Fastify and application in Svelte Kit

In the process of developing a web application, I am utilizing Fastify for the backend server and Svelte Kit for the frontend. My current challenge lies in sending cookies from the server to the client effectively. Despite configuring Fastify with the @fas ...

javascripttypescriptcookiessveltefastify

What is the best way to link my "dynamic sub-component" with AngularJS?

While I have a solid grasp on the fundamentals of AngularJS and can create basic CRUD applications, when it comes to applying this knowledge to real-world scenarios, I find myself struggling with how to integrate the concepts effectively. One specific cha ...

javascriptangularjs

Enhance user experience with a unique slideToggle method that does not rely on the height of

Show some hidden content using the jQuery slideToggle method when clicking on a title: $(".main-section .main-section-title").click(function() { $(this) .parent() .next(".content") .slideToggle(500, "linear"); }); <script src="https://c ...

javascriptjquery

What could be causing the Typescript export to be undefined?

I'm in the process of creating an NPM package using Typescript and React (TSX). While following this blog post, I've decided to make multiple components instead of just one. However, when I attempt to import my module like this: import { Hello ...

javascriptreactjstypescript

Performing a mass update in MongoDB with the help of mongoose

Is there a way to perform bulk upserts with Mongoose? Essentially, I want to have an array and insert each element if it does not exist, or update it if it does. (I am using custom _ids). When I try using .insert, MongoDB throws an error E11000 for duplic ...

javascriptnode.jsmongodbmongoosemongodb-query

Displaying JSON as a table using React JS

I can't seem to display JSON data in a table using the useState hook in React, and I'm not sure why. Here's a snippet from my React file: {` import React, { useState } from 'react' import "../styling/Classes.css"; import data ...

javascriptreactjsjson

The publicPath configuration in Webpack is not functioning as expected

Check out my demo setup: Take a look at my webpack configuration below: module.exports = { entry: './app.js', output: { filename: 'bundle.js', path: './build', publicPath: 'http://localhost:3000/&apos ...

javascripthtmlwebpack

Ruby On Rails: Dealing with Partial Page Loading

As a newcomer to Ruby on Rails, I'm struggling to find answers to an issue I'm facing in my web app. After a few clicks in my development environment, some pages stop loading data abruptly without any error messages in the console or Firebug. The ...

javascriptjqueryruby-on-railsrubymongodb

Can you effectively leverage a prop interface in React Typescript by combining it with another prop?

Essentially, I am looking to create a dynamic connection between the line injectComponentProps: object and the prop interface of the injectComponent. For example, it is currently set as injectComponentProps: InjectedComponentProps, but I want this associat ...

javascriptreactjstypescript

Enhance your social chat app with Nodejs Mongoose by implementing autocomplete/suggest search functionality

As I work on creating a more efficient auto suggest search bar similar to Instagram's, I am faced with the challenge of matching regex of strangers. Imagine having a million users, each with their own unique handle. I want the search functionality to ...

javascriptnode.jsreactjsmongodbmongoose

The array within the JSON object holds vital information [Typescript]

I have some data stored in an Excel file that I want to import into my database. The first step was exporting the file as a CSV and then parsing it into a JSON object. fname,lname,phone Terry,Doe,[123456789] Jane,Doe,[123456788, 123456787] Upon convertin ...

javascriptarraysjsontypescriptcsv

Analyzing all the <option> elements within a <select> tag with jQuery

I have a WordPress plugin in development and I am currently facing an issue with comparing user-input from an <input> element to a set of <option> elements within a <select> element. Here is my current approach: $('button#test_bu ...

javascriptjqueryhtml

Is it possible to center an anchor link in React JS using Webpack, Sass, and Bootstrap 4?

Recently, I started delving into React JS and Webpack but encountered a perplexing issue. My goal is simple - to center an anchor link on the screen. However, despite trying various methods like inspecting the element, removing inherited styles, setting wi ...

javascriptcsstwitter-bootstrapreactjswebpack

Using AJAX to submit a form to a CodeIgniter 3 controller

I am working on adding a notification feature and need to run an ajax query through the controller when a button is clicked. Here's the script I'm using: $('#noti_Button').click(function (e) { e.preventDefault(); ...

javascriptajaxcodeigniter

Hover over to disable inline styling and restore default appearance

There are some unique elements (.worker) with inline styles that are dynamically generated through Perl. I want to change the background when hovering over them and then revert back to the original Perl-generated style. The only way to override the inline ...

javascriptjqueryhtmlcssperl