Example method for iframe cross domain POST submission

Preface

I used to ask questions about cross-domain in interviews. Therefore, I have a definite conceptual understanding of cross-domain, and know what cross-domain is and the method to solve it, but I have never operated it in practice. Until recently, in the company project, I encountered a practical case that needs to make iframe submit POST across domains, and I didn't understand how to use iframe for cross-domain operation.

When it comes to cross-domain, we have to mention the homology strategy of browsers.

The homology policy restricts how documents or scripts loaded from one source interact with resources from another source.

Source

If the protocol, port (if one is specified), and host are the same for both pages, then both pages have the same source.

From this definition, it can be seen that if the protocols, ports and hosts of two pages are different sources, they need to cross domains if they want to interact with each other.

iframe Cross-Domain POST No Refresh Commit

There are many cross-domain methods, such as JSONP, iframe, CORS, postMessage, etc. Because iframe is used in the project to cross-domain POST, this paper mainly summarizes how to use iframe to submit POST without refresh.

We know that submissions use form forms for submissions, But this submission will cause the page to jump, So the interaction is not friendly, To implement refresh-free commit, We will use Ajax, However, there may be a problem at this time-cross-domain, so how to solve this problem, we can use a hidden iframe, submit the data we will submit to this hidden iframe, and then let this iframe jump, so that we can visually refresh the page without jump (in fact, the page still jumps, but iframe is hidden and we can't see it).

After submission, we also need to get the data returned to us in the background, so we need to interact with the data in iframe and get the returned data.

In order to allow data to interact smoothly, we usually use document.domain Set the domain to the top-level domain.
In order to get the returned data, you need to use a function, and the function name has been told in the background.

Attached with implementation code

<form action="You POST Link" method="post" target="target" id="J_commenting">
 <select name="category" class="select J_filter" id="J_typeFilter">
 <option value="0" selected="selected">Select Category</option>
 <option value="1">Life</option>
 <option value="2">People</option>
 <option value="3">Landscape</option>
 <option value="4">Tech</option>
 <option value="5">Others</option>
 </select>
 <input name="title" type="text" class="misstion-title J_misstion-title">
 <textarea name="desc" class="misstion-description J_description" maxlength="200"></textarea>
 <button class="button J_button" type="submit">Submit</button>
</form>
<iframe name="target" style="display:none;"></iframe>

var $button = $('.J_button');
var $commenting = $('#J_commenting');
var $filter = $('.J_filter');
var $misstionTitle = $('.J_misstion-title');
var $description = $('.J_description');
$button.on('click', function () {
 var filterValue = $filter.val();
 var misstionTitleValue = $misstionTitle.val();
 var descriptionValue = $description.val();
 if (filterValue === '0' || misstionTitleValue === '' || descriptionValue === '') {
 alert('Check if you filled out all the fields required');
 } else {
 $commenting.submit();
 }
});
$commenting.on('submit', function () {
 document.domain = 'aa.com';
 window.addData = function (data) {
 var dataCode = data.code;
 var dataMsg = data.message;
 if (dataCode === 0) {
  alert('submit success!');
 } else {
  alert('submit failed!');
 }
 }
});

After clicking Submit, the data returned from the background:

document.domain = "aa.com";
var data = {"code":-2,"info":"please login first","message":"please login first"}; 
if( typeof(parent.window['addData']) == "function"){
 parent.window['addData'](data);
}else if( typeof(window.top['addData']) == "function"){
 window.top['addData'](data);
}

Summarize

The above is the whole content of this article, I hope that the content of this article can bring 1 certain help to your study or work. If you have any questions, you can leave a message for communication.