Sometimes you want to load other web page in your website's iframe, but due to…
How to send header to iFrame cross domain
Before we talk how to send header to iframe cross domain, we would like to recommend you to read this topic first How to send body to iFrame cross domain. This will tell you the way the you can send body in iframe cross domain. In some case, you not only want send body, but also want to send header to iframe. This topic will guide you how to send body and header to iframe.
<div id="container">
<iframe name="myFrame" id="output-frame-id" src="" style="height:100%;width:100%;" title="Iframe Example"></iframe>
</div>Normally if we want to display any web page of others website in your website, we just get that link and then set it in src is done. But for this case we cannot, we need to use AJAX to fetch the actual page with all the bodies and headers you want to send to iframe. The below code allows you to send body and header via AJAX request to the iframe:
// Post Body and Header to iFrame
var data = new FormData();
data.append('j_username', 'person');
data.append('pwd', 'password');
data.append('organization', 'place');
data.append('requiredkey', 'key');
var token = 'testing';
var xhr = new XMLHttpRequest();
xhr.open('POST', 'http://iframe.example.com');
xhr.onreadystatechange = handler;
xhr.responseType = 'document';
xhr.setRequestHeader('Authorization', 'Bearer ' + token);
xhr.send(data);
function handler() {
var iframe = document.getElementById("output-frame-id");
//alert(iframe.contentWindow);
if (this.readyState === this.DONE) {
if (this.status === 200) {
var content = iframe.contentWindow ||
iframe.contentDocument.document ||
iframe.contentDocument;
content.document.open();
content.document.write(this.response.documentElement.innerHTML);
content.document.close();
} else {
iframe.setAttribute('srcdoc', '<html><head></head><body>Error loading page.</body></html>');
}
}
}How to allow your web page access cross domain in iFrame
To allow your web page access cross domain in iframe, you need to add this code into .htaccess or you can add it in your web server configuration.
Header set Access-Control-Allow-Origin *
Header set Access-Control-Allow-Headers "Authorization"
Related Posts
This Post Has 0 Comments