关于iframe跨域POST提交的方法示例_iframepost请求,iframe跨域post提交

data

frame

172 浏览量更新于2023-05-06 评论收藏 53KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源评论

资源推荐

关于关于iframe跨域跨域POST提交的方法示例提交的方法示例

前言前言

以前在面试的时候经常遇到问关于跨域的事儿，所以自己对跨域有一定的概念性了解，知道什么是跨域以及解决跨域的方法，

但是具体实际从来没有操作过，直到最近在公司项目中，遇到了一个需要使iframe跨域进行POST提交的实际案例，我才明白

具体如何使用iframe进行跨域操作。

说到跨域，就不得不提起浏览器的同源策略。

同源策略限制从一个源加载的文档或脚本如何与来自另一个源的资源进行交互。

源源

如果协议，端口（如果指定了一个）和主机对于两个页面是相同的，那么这两个页面就具有相同的源。

从这个定义可以看出，如果两个页面的协议，端口，主机三个只要有一个不一样，就是不同的源，想要相互之间进行交互，就

需要进行跨域。

iframe跨域跨域POST无刷新提交无刷新提交

跨域的方法有很多，像JSONP、iframe、CORS、postMessage等等，由于项目中用到了iframe进行POST跨域，所以本文主

要总结一下如何利用iframe进行POST无刷新提交。

我们知道一般提交使用form表单进行提交，但是这种提交会导致页面跳转，所以交互效果不是友好，为了实现无刷新提交，我

们会使用Ajax，但是此时可能会出现一个问题—-跨域，那么如何解决这个问题呢，可以使用一个隐藏的iframe，我们将要提交

的数据提交到这个隐藏的iframe，然后让这个iframe去跳转，这样就可以在视觉上实现页面无跳转刷新（实际上页面还是跳转

了，只是iframe被隐藏，我们看不到）。

在提交后我们还要获取到后台给我们返回回来的数据，所以需要在iframe中进行数据的交互同时拿到返回回来的data。

为了让数据可以顺利的进行数据交互，我们通常使用document.domain将域设置到顶级域。

为了拿到返回回来的data，需要使用一个函数，函数名后台已经告知。

附实现代码附实现代码

<option value="0" selected="selected">Select Category</option>

<option value="2">People</option>

<option value="3">Landscape</option>

<option value="5">Others</option>

</select>

<button class="button J_button" type="submit">Submit</button>

</form>

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 {

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余1页未读，立即下载

weixin_38607282

粉丝: 3
资源: 973

会员权益专享

关于iframe跨域POST提交的方法示例

评论0

会员权益专享

最新资源

关于iframe跨域POST提交的方法示例

评论0

postmessage解决iframe页面跨域

嵌套iFrame使用postMessage相互传递消息（嵌套iFrame、跨父子窗口、跨页面）.zip

iframe+postMessage实现跨域通信

vue解决iframe跨域

前端如何用代理页面解决iframe跨域访问的问题

jquery获取跨域iframe中内嵌iframe中的元素

iframe.contentWindow 完整示例

vue如何用postmessage和iframe

vue iframe内嵌网页交互

postmessage跨域

js跨域怎样修改iframe里面的html

vue给iframe传值

js如何判断是否在iframe中/JQuery调用iframe父页面元素与方法

从前端方面解决跨域问题 不动后端代码

vue3 iframe 报错

ajax 跨域 源码下载

js iframe 父级窗口获取 iframe窗口 渲染的内容 代码

iframe 有数据 iframeDocument 为空，如何解决

rrweb如何记录iframe中的内容

iframe动态自适应高度

会员权益专享

最新资源

从前端方面解决跨域问题不动后端代码

ajax 跨域源码下载

js iframe 父级窗口获取 iframe窗口渲染的内容代码