Modifier la propriété de l'élément à l'intérieur de l'iframe dans angulaire 2

Je voudrais changer la propriété d'un élément à l'intérieur de l'iframe dans angulaire 2 tapuscrit semblable à du code javascript

document.getElementById('iframeId').window.document.getElementById('home-grid').style.visibility = "hidden";

Mon Angulaire tapuscrit code:

var iframe   = document.getElementById('iframeId');
var insideDoc = iframe.contentDocument || iframe.contentWindow.document;

Erreur à la compilation le code:

stream.js:74
      throw er; //Unhandled stream error in pipe.
      ^
 Error: ./angularapp/web/component/mainPage/mainPage.ts
←[37m(←[39m←[36m35←[39m,←[36m32←[39m): ←[31merror TS2339: Property 'contentDocument' does not exist on type 'HTMLElement'.←[39m./angularapp/web/component/mainPage/mainPage.ts
←[37m(←[39m←[36m35←[39m,←[36m58←[39m): ←[31merror TS2339: Property 'contentWindow' does not exist on type 'HTMLElement'.←[39m

Est-il possible de réaliser cela dans angulaire 2? S'il vous plaît aider

  • Zöchbauer. La question n'est pas le double du lien fourni que ma question est d'obtenir de l'élément dans un iFrame dans angulaire 2 et je n'ai pas trouver un lien semblable à lui. Si la réponse est déjà bien vouloir partager le lien pour cela.
  • Il n'y a rien de spécial dans Angulaire, c'est le même que dans le JavaScript.
  • Mais j'obtiens l'erreur comme mentionné dans ma question. "Propriété" contentWindow "n'existe pas sur le type "HTMLElement'". Dois-je importer quoi que ce soit pour atteindre cette?
  • Votre code ne ressemble pas à celui de la accepté la réponse de la question. Votre question ne fournissent pas suffisamment d'informations pour déboguer votre problème de toute façon. Je suis très bien avec la réouverture de la question de savoir si vous montrez que votre problème ne peut être résolu avec le lié réponse.
InformationsquelleAutor AishApp | 2016-04-09
  1. 11
    @Component({
  selector: 'my-app',
  template:`
    <h1>Selecting Number</h1>
    <iframe id="iframeId" src="iframe.html" (load)="onLoad()"></iframe>
  `,
})
export class App {
  onLoad()  {
    var iframe   = document.getElementById('iframeId');
    var iWindow = iframe.contentWindow
    var doc = iframe.contentDocument || iframe.contentWindow.document;
    console.debug(doc);
    console.log(doc.getElementById('foo').innerText);
  }
}

    Plunker démo

    • J'ai même les étapes dans mon fichier. mais je reçois toujours le message d'erreur de compilation mentionnés ci-dessus. Dois-je importer n'importe quoi pour obtenir ce HTMLElement?
    • essayez var iWindow = (<HTMLIFrameElement>iframe).contentWindow;
    • var iframe = document.getElementById ("iframeId'); var doc = (<HTMLIFrameElement>iframe).contentDocument || (<HTMLIFrameElement>iframe).contentWindow.document; console.log("Iframe retourne ",iframe); console.log("Doc retourne ", doc); iframe renvoie l'intégralité du document, tandis que la variable 'doc' renvoie la valeur null.
    • Depuis iframe est de type HTMLELEMENT, il fonctionne. ContentWindow et contentDocument ne sont pas accessibles de type HTMLElement. Quand j'ai catalogué à HTMLIFrameElement, var doc renvoie la valeur null. Quelle est la solution pour obtenir ce fait?
    • Je ne comprends pas le problème. Si le casting fonctionne, pourquoi ne pas vous venez de le faire? Ce n'est que pour l'analyse statique, le casting n'est pas pertinent pour l'exécution. Votre code fonctionne toujours.
    • Comme vous l'avez dit, mon code compile sans problèmes. Mais var doc retourne vide-tête et le corps de la balise avec qui je suis incapable d'accéder à des éléments dans mon iframe.
    • Pouvez-vous reproduire dans un Plunker. Le Plunker lié dans ma réponse semble à ce que vous voulez, non?
    • Votre plunker code fonctionne exactement comme je le souhaite. Je suis en utilisant le même code ici encore face à des questions 🙁
    • Laissez-nous continuer cette discussion dans le chat.
    • Pour une raison quelconque la charge de l'événement est déclenché deux fois, quelqu'un ayant le même problème?
    • stackoverflow.com/questions/42677931/... c'est exactement la même problème. C'est un Chrome question. Liés réponse montre comment les éviter.
    • bon, ionique servir" ne travaille pas", "ionique cordova run android -lcs" ne travaillent pas parce que le live reload cause d'erreur, seulement "ionique cordova exécuter android" est de travail. Merci pour votre réponse, il travail maintenant, pour moi
    • Plunker est mort maintenant, Veuillez mettre à jour

    InformationsquelleAutor Günter Zöchbauer