web-dev-qa-db-fra.com

Est-il possible d'ajouter des en-têtes de demande à une demande iframe src?

Je comprends que vous pouvez définir très facilement les en-têtes de requête HTTP lorsque vous effectuez des appels AJAX en JavaScript.

Cependant, est-il également possible de définir des en-têtes de requête HTTP personnalisés lors de l'insertion d'un iframe dans une page via un script?

<iframe src="someURL"> <!-- is there any place to set headers in this? -->
javascriptiframehttprequest
54
onlywei

Non, tu ne peux pas. Cependant, vous pouvez définir la source iframe sur une sorte de script de préchargement, qui utilise AJAX pour récupérer la page réelle avec tous les en-têtes souhaités.

22
Niet the Dark Absol

Vous pouvez faire la demande en javascript, en définissant les en-têtes que vous souhaitez. Ensuite, vous pouvez URL.createObjectURL() , pour obtenir quelque chose qui convient au src de l'iframe.

var xhr = new XMLHttpRequest();

xhr.open('GET', 'page.html');
xhr.onreadystatechange = handler;
xhr.responseType = 'blob';
xhr.setRequestHeader('Authorization', 'Bearer ' + token);
xhr.send();

function handler() {
  if (this.readyState === this.DONE) {
    if (this.status === 200) {
      // this.response is a Blob, because we set responseType above
      var data_url = URL.createObjectURL(this.response);
      document.querySelector('#output-frame-id').src = data_url;
    } else {
      console.error('no pdf :(');
    }
  }
}

Le type MIME de la réponse est conservé. Donc, si vous obtenez une réponse html, le html s'affichera dans l'iframe. Si vous avez demandé un pdf, la visionneuse pdf du navigateur démarrera pour l'iframe.

Si cela fait partie d'une application côté client de longue durée, vous souhaiterez peut-être utiliser URL.revokeObjectURL() pour éviter les fuites de mémoire.

Les URL des objets sont également assez intéressantes. Ils sont de la forme blob:https://your.domain/1e8def13-3817-4eab-ad8a-160923995170. Vous pouvez réellement les ouvrir dans un nouvel onglet et voir la réponse, et ils sont supprimés lorsque le contexte qui les a créés est fermé.

Voici un exemple complet: https://github.com/courajs/pdf-poc

50
FellowMD