Чи можна додати заголовки запитів до запиту iframe src?

Question 1

Я розумію, що ви можете дуже легко встановлювати заголовки запитів HTTP під час здійснення викликів AJAX у JavaScript.

Однак чи можливо також встановити власні заголовки запитів HTTP під час вставки iframe на сторінку за допомогою сценарію?

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

Question 2

Ні, ти не можеш. Однак ви можете встановити для iframeджерела якийсь сценарій попереднього завантаження, який використовує AJAX для отримання фактичної сторінки з усіма потрібними заголовками.

Question 3

Ви можете зробити запит у javascript, встановивши будь-які потрібні заголовки. Тоді ви можете URL.createObjectURL(), щоб отримати щось підходяще для srcфрейму.

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 :(');
    }
  }
}

Тип відповіді MIME зберігається. Отже, якщо ви отримаєте відповідь html, html відобразиться в iframe. Якщо ви запитали PDF-файл, програма перегляду PDF-файлів у браузері підключиться до iframe.

Якщо це частина довготривалої програми на стороні клієнта, можливо, ви захочете використовувати, URL.revokeObjectURL()щоб уникнути витоків пам’яті.

URL-адреси об’єктів також досить цікаві. Вони мають таку форму blob:https://your.domain/1e8def13-3817-4eab-ad8a-160923995170. Ви можете насправді відкрити їх у новій вкладці та побачити відповідь, і вони відкидаються, коли контекст, який їх створив, закривається.

Ось повний приклад: https://github.com/courajs/pdf-poc

Question 4

Виявляється, URL.createObjectURL () застарілий у Chrome 71
(див. Https://developers.google.com/web/updates/2018/10/chrome-71-deps-rems )
Спираючись на @Niet темний Абсолют та Відмінні відповіді @ FellowMD, ось як завантажити файл у iframe, якщо вам потрібно передати заголовки автентифікації. (Ви не можете просто встановити атрибут src як URL-адресу):

$scope.load() {
    var iframe = #angular.element("#reportViewer");
    var url = "http://your.url.com/path/etc";
    var token = "your-long-auth-token";
    var headers = [['Authorization', 'Bearer ' + token]];
    $scope.populateIframe(iframe, url, headers);
}

$scope.populateIframe = function (iframe, url, headers) {
    var xhr = new XMLHttpRequest();
    xhr.open('GET', url);
    xhr.onreadystatechange = handler;
    xhr.responseType = 'document';
    headers.forEach(function (header) {
        xhr.setRequestHeader(header[0], header[1]);
    });
    xhr.send();

    function handler() {
        if (this.readyState === this.DONE) {
            if (this.status === 200) {
                var content = iframe[0].contentWindow ||
                    iframe[0].contentDocument.document || 
                    iframe[0].contentDocument;
                content.document.open();
                content.document.write(this.response.documentElement.innerHTML);
                content.document.close();
            } else {
                iframe.attr('srcdoc', '<html><head></head><body>Error loading page.</body></html>');
            }
        }
    }
}

і кричати Courajs: https://github.com/courajs/pdf-poc/blob/master/script.js

Question 5

Оскільки відповідь @FellowMD не працює на сучасних браузерах через знецінення createObjectURL, я застосував той самий підхід, але використовуючи атрибут iframe srcDoc.

Отримайте вміст для відображення у iframe за допомогою XMLHttpRequest або будь-яким іншим методом
Встановіть параметр srcdoc iframe

Будь ласка, знайдіть нижче приклад React (я знаю, що це надмірно):

import React, {useEffect, useState} from 'react';

function App() {
  const [content, setContent] = useState('');


  useEffect(() => {
    // Fetch the content using the method of your choice
    const fetchedContent = '<h1>Some HTML</h1>';
    setContent(fetchedContent);
  }, []);


  return (
    <div className="App">
      <iframe sandbox id="inlineFrameExample"
              title="Inline Frame Example"
              width="300"
              height="200"
              srcDoc={content}>
      </iframe>


    </div>
  );
}

export default App;

Зараз Srcdoc підтримується у більшості браузерів. Здається, Edge трохи запізнився з його реалізацією: https://caniuse.com/#feat=iframe-srcdoc