How to select an element of the DOM with ionic 2?

Navigation
1

I am developing an application with ionic and I need to capture an information that exists in an external web page, I have tried to embed the web with a <iframe> tag and I try to select the html element that contains the data but I can not do it, the information that I need to obtain is what is highlighted in red:

What I have tried is the following:

Html: 

<ion-header>
  <ion-navbar>
    <ion-title>
      Home
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content >
  <iframe class="iframe" src="http://www.flalottery.com/fantasy5"></iframe>
</ion-content>

ts: 

import { Component, ViewChild } from '@angular/core';
import { NavController } from 'ionic-angular';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

    @ViewChild('gameContentLeft') sorteo;
  constructor(public navCtrl: NavController) {
  }

  ionViewDidLoad() {
    var sorteo = document.getElementById('gameContentLeft')
    console.log([sorteo, this.sorteo]);
    console.log('ionViewDidLoad RegistroPage');
  }

}

But everything gives me as undefined or null, In what way can I extract this data from this page using JavaScript ? Is there any other way to extract this data with ionic without using the <iframe> tag?

    
asked by Daniel Enrique Rodriguez Caste 26.10.2017 в 17:58
source

1 answer

0

If the page you are showing in the iframe is yours, you can use the window.postMessage () method that allows cross-origin communication to be secure.

Send a message from the website 

sendMessage(){
  mensaje = "hola";
      this.iframe.nativeElement.contentWindow.postMessage(mensaje,'*');
};

Capture the message in the ionic app 

window.onmessage = (e)=>{
   console.log("Mensaje: ", e.data);    
      };
  

Normally, scripts on different pages can access each other if and only if the pages that ran them are in locations with the same protocol (usually both https), port number (443 is the default https) and host (Document.domain module set by both) pages with the same value). window.postMessage () provides a controlled mechanism to circumvent this restriction in a secure manner when used appropriately.

More information: link

    
answered by 27.10.2017 в 20:45
Error retrieving record with a null property in Oracle Javascript only works on the same page [closed]