2012-11-17 65 views
27

Tôi hiểu rằng bạn có thể đặt tiêu đề yêu cầu HTTP rất dễ dàng khi thực hiện cuộc gọi AJAX bằng JavaScript.Có thể thêm Yêu cầu Tiêu đề vào yêu cầu iframe src không?

Tuy nhiên, bạn cũng có thể đặt tiêu đề yêu cầu HTTP tùy chỉnh khi chèn iframe vào trang thông qua tập lệnh?

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

Trả lời

14

Không, bạn không thể. Tuy nhiên, bạn có thể đặt nguồn iframe cho một số loại tập lệnh tải trước, sử dụng AJAX để tìm nạp trang thực tế với tất cả các tiêu đề bạn muốn.

+3

Hi Niết, bạn có thể vui lòng cung cấp mã thực hiện mẫu trong JSFiddle –

+0

Tôi tin rằng Niết nghĩa một cái gì đó như thế này http://stackoverflow.com/a/17695034/1524918 –

+2

wouldn Yêu cầu trong tập lệnh tải trước như vậy được gửi đến một miền khác và do đó vi phạm Chính sách xuất xứ giống nhau? – mart1n

12

Bạn có thể thực hiện yêu cầu trong javascript, đặt bất kỳ tiêu đề nào bạn muốn. Sau đó, bạn có thể URL.createObjectURL() để nhận nội dung phù hợp với src của khung nội tuyến.

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

Loại MIME của phản hồi được giữ nguyên. Vì vậy, nếu bạn nhận được phản hồi html, html sẽ hiển thị trong khung nội tuyến. Nếu bạn yêu cầu một pdf, trình xem pdf trình duyệt sẽ khởi động iframe.

Nếu đây là một phần của ứng dụng phía máy khách lâu đời, bạn có thể muốn sử dụng URL.revokeObjectURL() để tránh rò rỉ bộ nhớ.

URL đối tượng cũng khá thú vị. Chúng có dạng blob:https://your.domain/1e8def13-3817-4eab-ad8a-160923995170. Bạn thực sự có thể mở chúng trong một tab mới và xem phản hồi, và chúng bị loại bỏ khi bối cảnh tạo ra chúng được đóng lại.

Dưới đây là một ví dụ đầy đủ: https://github.com/courajs/pdf-poc

+0

Hoàn hảo. Làm việc hoàn hảo. Cảm ơn bạn. – mike123

+0

bạn tha người! Tôi đang làm việc trên một thành phần Angular 5 lấy cảm hứng từ mã này để hiển thị bản xem trước pdf trong Angularjs. điều này đã giúp tôi rất nhiều – FireDragon

+0

@FireDragon vui mừng khi nghe điều đó! Liên kết nó ở đây nếu bạn mở nguồn – FellowMD

Các vấn đề liên quan