When interacting with the iframe in an Ionic3 app, it suddenly crashes

Greetings! I have integrated a flipping book URL inside an iframe:

<ng-container>
        <iframe 
                [src]="eUrl"
                id="flipping_book_iframe"
                frameborder="0"
                allowfullscreen="allowfullscreen"></iframe>
</ng-container>

However, there seems to be an issue where clicking on the download button (within the flipping book URL) causes the app to crash after a few seconds. On the bright side, the navigation through next and previous slides is functioning properly.

Ionic:

ionic (Ionic CLI) : 4.0.2

Ionic Framework : ionic-angular

3.9.2 @ionic/app-scripts : 3.2.0

Cordova:

cordova (Cordova CLI) : 8.1.2 ([email protected])

Cordova Platforms: not available

System:

Android SDK Tools : 25.2.5

NodeJS : v8.9.3

npm : 5.4.2

OS : Windows 10

Upon inspecting the content within the iframe, I noticed that 'publication.pdf' doesn't seem to function smoothly on mobile devices, although it operates fine on websites.

javascriptangulartypescriptiframeionic3

Answer №1

Here is a solution I discovered:

<ng-container>
    <iframe 
            [src]="eUrl"
            id="flipping_book_iframe"
            #flippingBook
            (load)="onLoadFlippingBook()"
            frameborder="0"
            allowfullscreen="allowfullscreen"></iframe>
</ng-container>

In the .ts file:

 @ViewChild('flippingBook') flippingBookIframe: ElementRef;

onLoadFlippingBook(){
    if(this.flippingBookIframe){
      let iframe = jQuery('#flipping_book_iframe');
      let allAs = iframe.contents().find('a[target=_blank]');
      allAs.on("click",function(e){
        e.preventDefault();
        let url = this.href;
        window.open(url,"_system");
      });
    }

Now, when you click on the download button, the PDF will open.

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

Adjusting solely the depicted data sets in the Highcharts.js library

I have a spline chart with 10 different curves on it - When the page is first loaded, none of the charts are visible as I have set "visible" to false. Users will then click on the curve(s) they want to see. I am looking for a way to dynamically change the ...

javascriptjquerypythonhighcharts

Any tips for customizing the appearance of a {Switch} component from react-router-dom? I attempted to encase it in a <div> element, but it did

https://i.stack.imgur.com/4piCG.jpg https://i.stack.imgur.com/CyQH3.jpg My code attempts to modify the styling of the map component, but it seems to be influenced by the Switch component. How can I ensure that the screen fits within the 'root' ...

javascriptreactjsmaterial-ui

Unable to integrate any modules or components from bit.dev into my React application

I am currently working on a React project and encountering an issue with importing a component from bit.dev. After installing the package via my terminal with the command: bit import nexxtway.react-rainbow/button You can find more information about it t ...

javascriptreactjsnpmyarnpkgbit.dev

Error in Django framework: Attempting to insert a null value in the "hardware_type" column violates the not-null constraint

I have encountered a problem for which I have found solutions on Stack Overflow, but unfortunately, they do not work in my specific case. Here is a snippet of my code: models.py hardware_used = models.CharField(max_length=20, blank=True, null=True) core ...

pythonangulardjango-rest-framework

Chart rendering failure: unable to obtain context from the provided item

I am encountering an issue while trying to incorporate a chart from the charts.js library into my Vue.js and Vuetify application. The error message that keeps popping up is: Failed to create chart: can't acquire context from the given item Even af ...

javascriptvue.jschart.jsvue-componentvuetify.js

how can I update a class of an element when the input box is disabled in angular?

Is there a way in Angular to change the class of a separate element (calendar icon button) when it detects that an input textbox is disabled? I have a disabled input type textbox and I want the class of the calendar icon button to be changed based on its d ...

angulardisabled-input

Dealing with checkbox changes in Angular 2

I have a checkbox that is initially checked, and I want to use the (change) event on it. After being clicked, I want to clear the input text for "Activation key". When re-checked, I want to generate a GUID and add it back to the input field. How can I dete ...

angularcheckboxangular2-forms

Using JQuery to Load Text Content from Textarea into an IFrame

Seeking a solution to transfer HTML textarea content into an IFrame upon button click. Any suggestions on achieving this functionality? Thank you in advance. Illustratively, when a user types Hello World in the textarea and clicks the submit button, the t ...

phpjqueryhtmliframe

How can I make an HTML button the default option within a form?

Currently, I am working on an asp.net page which contains a mix of asp.net buttons and HTML input[type=button] elements. These HTML buttons are specifically used to initiate AJAX calls. My dilemma arises when the user hits ENTER - instead of defaulting to ...

c#javascriptasp.net.nethtml

A guide on seamlessly incorporating FlotJs functionalities into a ReactJs application

Having trouble integrating Flot charts into React due to a '$.plot' is not a function error. Here's the code I'm using: Script tags Index.html <script src="dist/libs/js/jquery.min.js"></script> <script src="dist/libs/js ...

javascriptjqueryreactjsflot

Using the $group operator with a nested array component

Can you show me how to utilize MongoDB's aggregation feature to summarize the count of each reason_id? I have noticed that there are 2 counts for "reason_id = KW7Kcsv7835YZeE3n" and 1 count for "reason_id = KNcKQCjhFzha3oLfE". Below is the dataset: ...

javascriptmongodbaggregation-framework

Is it possible to selectively mock certain components of an external module using jest?

I am totally new to using Jest, especially in regards to unit tests, and I am struggling to write a test for a specific scenario. I know that you can mock an external module like this.. jest.mock('@organisation/library', () => ({ Database: j ...

javascripttypescriptjestjs

"Transforming a simple object into an instance of a different type in JavaScript: A step-by-step guide

Having an issue storing a session on disk for local development. The application is asking for an instance of Session to be returned, not an Object function storeCallback(session) { console.log("storeCallback ", session); fs.writeFileSync(&qu ...

javascriptnode.jsshopifyjavascript-objects

By default, the ng build command constructs the development environment rather than the production environment

Whenever I execute the "ng build" command in the terminal, it constructs the development environment instead of the production environment. If I use the "ng build --prod" command, everything works as expected. However, by default, it continues to build th ...

angulardeploymentbuildproductionng-build

JavaScript pause until the DOM has been modified

My current situation involves using a JavaScript file to make changes to the DOM of a page by adding a navigation menu. Following this code, there is another function that further modifies the newly added navigation menu. However, I am facing an issue wher ...

javascriptjqueryhtmldom

Tips for displaying dynamic data using innerHTML

Recently, I set out to implement an infinite scroll feature in Angular 2 using JavaScript code (even though it may seem a bit unusual to use JavaScript for this purpose, it's actually working perfectly). Initially, I was able to create an infinitely s ...

javascripthtmlangularinnerhtml

Overlap one element entirely with another

Currently, I am working on a way for an element called overlayElement to completely cover another element known as originalElement. The overlayElement is an iFrame, but that detail may not be significant in this scenario. My goal is to ensure that the over ...

javascripthtmlcss

Unlimited Cycle using Vue Router Global Precautionary Measures

Currently, I am facing an issue with redirecting users using Firebase Auth and Vue Router. The problem arises when the Router redirects the user to '/' as it results in a blank white screen on the website. I am aware that there is an error in m ...

javascriptfirebasevue.jsfirebase-authenticationvue-router

Exporting numerous modules from an NPM package

Currently, I am working on a large Node and Typescript project called Project A. This project consists of numerous modules that I intend to reuse in another project, Project B. In order to achieve this reusability, I have configured the tsconfig.json file ...

node.jstypescriptnpmyarnpkgyarn-workspaces

What is the best method for updating the .value property within an AngularJS controller?

I managed to successfully pass a value from one AngularJS module to another using the .value method. Here is an example of it working: var app = angular.module('app', []); app.value('movieTitle', 'The Matrix'); var app1 =ang ...

javascriptangularjsangularjs-directiveangularjs-scope