javascript - How to set custom http headers when changing iframe src?

Question

Is there a way to add a custom http header into the request done by an <iframe> when changing the source (src) using javascript?

Answer 1

You can have the results of an ajax request that has custom headers be set as the content of an iframe like so:

$.ajax({
    type: "GET", 
    url: "https://app.icontact.com/icp/a/",
    contentType: "application/json",
    beforeSend: function(xhr, settings){
            xhr.setRequestHeader("some_custom_header", "foo");},
    success: function(data){
        $("#output_iframe_id").attr('src',"data:text/html;charset=utf-8," + escape(data))
    }
});

This is assuming the iframe is pointing at a cross domain src. It is simpler if everything is on the same domain.

Edit: Maybe try this variation.

$.ajax({
    type: "GET", 
    url: "https://app.icontact.com/icp/a/",
    contentType: "application/json",
    beforeSend: function(xhr, settings){
            xhr.setRequestHeader("some_custom_header", "foo");},
    success: function(data){
        $("#output_iframe_id").attr('src',"/")
        $("#output_iframe_id").contents().find('html').html(data); 
    }
});