Włącz szczypanie, aby powiększyć wewnątrz elementu iframe - Ionic 2 AngularJS 2

Question

Dodałem zooming="true" do tagu, ale po załadowaniu strony nie mogę powiększyć, aby zwiększyć lub zmniejszyć widok. Ustawiłem też webkitallowfullscreen mozallowfullscreen allowfullscreen, aby przeskalować stronę, aby dopasować ją do ekranu urządzenia, ale nic się nie zmieniło i strona jest nadal odcięta.

Aby nieco lepiej wytłumaczyć tę koncepcję, biorę na przykład aplikacje natywne w postaci Android. Teraz, jeśli chcesz wczytać stronę z Internetu, użyjesz WebView, a wynik jest dokładnie taki sam jak przy użyciu iframe na Ionic. Ale na Androidzie rzeczy stają się prostsze dotyczące personalizacji:

webview.getSettings().setBuiltInZoomControls(true); 

włączyć pinch-to-zoom, a

webview.getSettings().setUseWideViewPort(true); 

aby pasowały i skalowanie strony internetowej w zależności od wielkości ekranu (mobilnej). Teraz, używając Windows 10, nie mogę zbudować native iOS apps, więc muszę polegać na cross-platform development.

Oto mój detail-page: html:

<ion-content> 
    <iframe sandbox class="link" frameborder="0" [src]="webPage()" zooming="true" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> 
</ion-content> 

scss:

detail-page { 

    .scroll-content{ 
     padding: 0px ; 
    } 

    ::-webkit-scrollbar, 
    *::-webkit-scrollbar { 
     display: none; 
    } 

    iframe.link { 
     width: 100%; 
     height: 100%; 
     max-width: 100%; 
     max-height: 100%; 
    } 

} 

ts:

webPage() { 
     return this.sanitizer.bypassSecurityTrustResourceUrl(this.entry.getElementsByTagName('link')[0].textContent); 
    } 

Spodziewać się można mi pomóc.

Edit

dodałem document.getElementsByTagName('iframe').contentWindow.document.body.style = 'zoom:50%'; ale Dostaję błąd maszynopis:

Typescript Error 
Property 'contentWindow' does not exist on type 'NodeListOf<HTMLIFrameElement>'. 

Oto mój cały .ts file:

export class DetailPage { 

    entry:any = []; 

    constructor(private sanitizer: DomSanitizer, public nav: NavController, navParams:NavParams) { 
     console.log('run'); 
     this.nav = nav; 
     this.entry = navParams.get('selectedEntry'); 
     console.log('My entry is: "'+ this.entry.getElementsByTagName('title')[0].textContent + '"'); 

     document.getElementsByTagName('iframe').contentWindow.document.body.style = 'zoom:50%'; 
    } 

    webPage() { 
     return this.sanitizer.bypassSecurityTrustResourceUrl(this.entry.getElementsByTagName('link')[0].textContent); 
    } 
} 

Edycja 2

Po dodaniu id="myframe" do wnętrza próbowałem również z funkcją ngAfterViewInit(), ale wciąż nie wprowadzono żadnych zmian.

ngAfterViewInit() { 
    var x = document.getElementById("myframe"); 
    var y = (<HTMLIFrameElement> x).contentWindow.document; 
    y.body.style.zoom = "50%"; 
} 

iw tej formie TOO:

ngAfterViewInit() { 
    var iframe:HTMLIFrameElement = <HTMLIFrameElement>document.getElementById('myframe'); 
    var iWindow = (<HTMLIFrameElement>iframe).contentWindow.document; 
    iWindow.body.style.zoom = "50%"; 
} 

Answer 1

Myślę, że nie można tego zrobić w ramce IFrame, ponieważ będzie to wada bezpieczeństwa. to, co zasadniczo robisz, to próba uzyskania dostępu do strony internetowej z mobilnej aplikacji hybrydowej (aplikacja Ionic w twoim przypadku). nie musi pozwalają na wykonywanie kodu JavaScript na tej stronie internetowej, obejście będzie poprzez wyłączenie bezpieczeństwa internetowego na tej przeglądarce lub w przypadku WebView (nie wiem jak to zrobić w telefonii komórkowej, ale to jest instrukcja dostosowywanie przeglądarki tak nie będzie działać w twój scenariusz).

więcej wyjaśnień na temat tego postu SecurityError: Blocked a frame with origin from accessing a cross-origin frame

Answer 2

Trzeba będzie śledzić ten gest i zastosować zmianę powiększenia do iframe jak ten document.getElementByTagName('iframe').contentWindow.document.body.style = 'zoom:50%';

Tutaj zoom jest ustawiony na 50%, ale można to dodać dynamicznie za pomocą wartości zdarzeń gestów.