Issue with Phonegap Ionic: Unable to navigate back using history.back() in iframe

I am working on an app that requires displaying an iframe as a page. I want to include back and forward buttons on the page so that users can navigate through the history of the iframe.

Here is what I have tried:

$scope.backiframe = function() {

  var iframe = document.getElementById('iframe');
  iframe.contentWindow.history.go(-1);
}

However, when I add the button and iframe like this: 

<a class="button button-positive" ng-click="backiframe()">back</a>
<iframe id="iframe" ng-src="{{trustSrc(url)}}" scrolling="yes"></iframe>

I encounter the following error: 

Error: Permission denied to access property "history"
$scope.backiframe@http://localhost:8100/js/controllers.js:1217:16
anonymous/fn@http://localhost:8100/lib/ionic/js/ionic.bundle...

Does anyone know how to make the back and forward functionality work in an Ionic hybrid app using PhoneGap?

javascriptangularjscordovaiframeionic-framework

Answer №1

If the iframe you are trying to access has a URL outside of the current page domain, you will not be able to do so. This is due to modern browsers implementing a Same Origin Policy, which dictates the permissions of JavaScripts when attempting cross-site scripting.

When a parent and child frame come from the same domain, they can interact with each other; the child can access and manipulate properties and methods of the parent, and vice versa. However, if they are from different domains, any such attempts will result in script errors indicating Permission denied.

If the iframe is hosted on a different domain, browser security restrictions prevent you from accessing its browsing history. The Same Origin Policy restricts you from navigating back.

Check out these related questions for more information: -

  1. Error: Can't access property href
  2. Permission denied to access property in IFRAME

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

Discovering the minimum and maximum within an array containing objects

I am working with an array of objects that contain latitude and longitude points: var pts = [ { "X": 52.67528921580262, "Y": 8.373513221740723 }, { "X": 52.6759657545252, "Y": 8.374114036560059 }, { "X": 52.682574466310314, "Y": 8.372569084 ...

javascriptarraysobjectmaxmin

"Encountered a Json error with a bizarre character causing the string

After extracting some json data from a website, I encountered an issue when trying to parse it using vscode. I kept getting an 'unexpected end of string' error on the "content" line: Here is the json: { "name": "Anna Vergnas", "date" ...

javascriptarraysjsonweb-scraping

Reorganizing a list in AngularJS after adding a new item

I have made edits to the AngularJS ordering example in my Plunker. The ordering works fine initially, but when I add a new person using code to periodically update the list of contacts, the new person gets added to the bottom without re-sorting. Is there a ...

javascriptangularjs

What steps can I take to deactivate input and stop it from being accessible on the browser?

insert image description Is there a method to block users from accessing disabled input fields in the browser? Any recommendations or solutions would be greatly appreciated. Vuejs is utilized within my project. Implementing this feature serves as a secu ...

javascripthtmljqueryvue.js

Utilizing AngularJS's $http.get to fetch video IDs and then combining them with the /embed endpoint through the ng

Currently, I am utilizing $http.get to retrieve a list of videos from YouTube using the API endpoint 'MY_API_KEY'. The goal is to construct a link with the video ID in the format: "{{videoID}}". However, extracting the videoID proves to be chall ...

javascriptangularjsiframevideoyoutube

JavaScript Plugins for Cordova

The more I delve into the inner workings of Cordova, the clearer it becomes to me. Yet, one area that continues to perplex me is the structure of JavaScript plugins. Typically, I write my JavaScript code as follows, adhering to what I believe is the stand ...

javascriptpluginscordovacordova-3

What is the process for adding images from CSS (backgrounds, etc.) to the build folder with webpack?

Trying out the file loader for processing images and adding them to my build folder. Images within HTML files successfully show up in the build, but the ones from styles do not. I've divided my webpack configuration into two separate files and use t ...

javascriptwebpackwebpack-file-loader

Javascript problem involving multiple scopes in closures

What is the most effective solution for addressing this issue related to closure in JavaScript? Here is a simple problem I am facing: I have 10 spans with onclick events (I want an alert showing the number of the span clicked on each click): var spans = ...

javascriptclosures

React - Object(...) is throwing an error because it is not a function or the value it is returning cannot be

I have encountered an issue with my React hook that wraps a class component. I am attempting to pass a state from this hook to the class component using useEffect, but I keep receiving the following error: TypeError: Object(...) is not a function or its r ...

javascriptreactjs

Encountered an unexpected comma token while attempting to map an array in ReactJS

Can't figure out why I'm getting an error when trying to map an array in React with the following code: const { loading, error, posts } = this.props; return( {posts.map(onePost => ({ <p key={onePost.id}>{onePost.title}&l ...

javascriptreactjs

Encountering an unrecognized error on Windows when attempting to execute a child process with regex return

Below is the code I am utilizing to retrieve Make file targets: const command = `make -qp | awk -F':' '/^[a-zA-Z0-9][^$#\\/t=]*:([^=]|$)/ {split($1,A,/ /);for(i in A)print A[i]}'`; cp.exec(command, options, (error, stdout, s ...

javascriptnode.jsregexwindowsmakefile

"Create visually appealing designs with Material UI by incorporating round images in Card

Recently delving into full stack development, I've been experimenting with coding to enhance my understanding of frontend using React JS and Material UI. In the process, I incorporated a card component to display posts from the backend. However, I enc ...

javascriptcssreactjsmaterial-ui

Exploring the Depths of React Native Navigation

I am facing an issue with navigating between two screens in React Native. I have tried multiple codes but haven't been successful so far. The error message I am getting is 'undefined is not an object (RNGestureHandlerModule.State)'. As a beg ...

javascriptreactjsreact-native

Clicking on the checkbox will trigger an AJAX request to cache the

Encountering a problem with an old system I am currently updating: In the <div id='list'>, there is a checkbox list. Upon clicking a checkbox, it triggers an ajax request that returns JavaScript to execute. The JavaScript in the Ajax requ ...

javascriptjqueryhtmlajax

The function $scope.$watch(var,function) was not defined and caused an error stating that

Having trouble with the error message: "undefined is not a function" popping up when attempting to add a watch to the scope. I've been staring at this code for so long now, but still unable to locate the source of the issue. Why am I getting an undef ...

javascriptangularjshtml

Tips for detecting and handling add and remove events in react-select when adding or removing an item from the selection

updateSelection(value) { let removedItems = this.state.selected.filter(x => !value.includes(x)); console.log("Removed items: ", removedItems); this.setState({ selected: value }); } ...

javascriptreactjsreact-select

Efficiently search and filter items across multiple tabs using a single search bar in the Ionic 2

I am currently working on implementing a single search bar that can filter lists in 2 different tabs within Ionic 2. The search bar is functional, and I have a method for filtering through objects. However, my goal is to allow users to select different tab ...

javascriptangularjstypescriptionic2filtering

A guide to accessing REST services in AngularJS using basic authentication

I currently have a REST service up and running on my server. Using Chrome Postman, I am able to access this service with Basic Authentication. However, I now want to build a user interface in AngularJS to display the data received from the REST service. T ...

javascriptangularjsrest

Highcharts JavaScript - Sankey Graph Axis Orientation

As I work on developing a Sankey Diagram using the Highcharts JS library, I have encountered an issue with setting the axis. Can anyone advise whether it is feasible to utilize xAxis and yAxis in a Sankey diagram? I attempted to define the axis as shown b ...

javascripthighchartsaxis-labelssankey-diagram

Toggle switch with active state

I'm currently using Ionic 2 alongside Angular 2 beta 11. Is there a way to turn off the toggle switch? The Ionic documentation suggests using the checked attribute, but I've tried that and also attempted ng-checked with no luck. Any advice on t ...

javascriptangularjsangularionic-frameworkionic2