Comment lire du contenu iFrame en JavaScript

May 30

Comment lire du contenu iFrame en JavaScript


Avec la méthode getElementById de JavaScript, les programmeurs peuvent inspecter et modifier les détails intimes des objets qui composent une page Web. GetElementById accède le cadre interne de la page Web, appelé le modèle d'objet ou document DOM. Un programmeur peut même accéder au contenu des documents au sein des documents, tels que des cadres ou des iFrames, en utilisant la propriété innerHTML DOM. Pour des raisons de sécurité, certains navigateurs ne permettent pas l'accès DOM à iFrames stockés localement sur votre ordinateur. Pour vous assurer que vos scripts fonctionnent sur la plupart des navigateurs Web, vous devez télécharger les fichiers sur un serveur Web.

Instructions

1 Lancez l'application éditeur de texte qui est disponible sur votre ordinateur.

2 Entrez le code suivant dans l'éditeur de texte.

<Html>

<Head>

<Html>

<Head>

</ Head>

<Body>

<Script type = "text / javascript">

fonction IframeContent ()

{

// get the page object data for the iframe with the id "myIframe"

var Iframehandle = document.getElementById ( 'MyIframe');

// Obtenir le texte de l'iframe en accédant à l'objet de données de la trame.

// InnerHTML obtient le contenu plutôt que le code html

contenu var = Iframehandle.contentWindow.document.body.innerHTML;

// Mettre le contenu de l'iframe dans le <div> avec l'id "test"

. Document.getElementById ( 'test') innerHTML = contenu;

}

</ Script>

<Iframe id = "MyIframe" onclick = "IframeContent ()" value = "Montrer ce qui est dans l'iframe">

<Div id = "test"> Blank </ div>

</ Body>

</ Html>

3 Cliquez sur le menu Fichier. Sélectionnez l'option "Enregistrer". Enregistrer sous le nom de fichier "test.html."

4 Cliquez sur le menu Fichier. Sélectionnez l'option "Nouveau". Tapez le code suivant dans la nouvelle fenêtre éditeur de texte.

<Html>

<Head>

</ Head>

<Body>

Ceci est le iframe

</ Body>

</ Html>

5 Cliquez sur le menu Fichier. Sélectionnez l'option "Enregistrer". Enregistrer sous le nom de fichier "frame.html."

6 Lancez l'application FTP et connectez-vous au serveur Web. Téléchargez le fichier "test.html" et "frame.html" dans le répertoire racine du serveur.

7 Cliquez sur le bouton "Déconnecter" de l'application FTP.

8 Lancez un navigateur Web et saisissez l'URL appropriée pour accéder au fichier de test. Par exemple, entrez:

http://yourdomainname.com/test.html

Remplacer "yourdomainname.com" avec le nom de domaine ou l'adresse IP du serveur Web.

9 Appuyez sur la touche "Entrée" pour charger l'URL et exécutez le fichier de test. Cliquez sur le bouton avec le texte "Afficher ce qu'il ya dans l'iFrame" pour tester le script.

Conseils et avertissements

  • Vous pouvez créer un environnement de serveur Web sur votre ordinateur en téléchargeant et installant XAMPP ou EasyPHP. Les deux paquets seront automatiquement installer et configurer le serveur Web Apache, langage de script PHP, base de données MySQL et un serveur FTP. EasyPHP est pour les systèmes d'exploitation Windows uniquement; XAMPP fonctionne sur Windows, Mac OS X et Linux. Ces forfaits vous permettent de tester vos scripts sans avoir à passer par le sauvegarder, télécharger, test, enregistrer, re-télécharger et cycle d'essai. En outre, XAMPP et EasyPHP font pas des changements permanents à votre système. Si vous décidez de ne plus besoin d'eux, ils peuvent être facilement désinstallées.
  • Chacun des principaux navigateurs Web peuvent exécuter du code JavaScript valide différemment ou pas du tout. Même les différentes versions du même navigateur seront parfois exécuter le même code différemment. La plupart des navigateurs modernes ont des utilitaires JavaScript de rapports d'erreur et de débogage installé ou disponible en tant que add-ons, plug-ins ou extensions qui peuvent vous aider à développer le code de travail. Toujours tester votre code sur différents navigateurs et les anciennes versions du même navigateur afin d'assurer le code fonctionne comme prévu.

          

Post a comment: