//下面是谷歌浏览器处理方式,微信端,直接使用微信链接不作处理,,火狐浏览器另行处理。。。

借鉴地址:http://stackoverflow.com/questions/15005500/loading-cross-domain-html-page-with-ajax

//

//跨域请求处理----CORS Anywhere
$.ajaxPrefilter(function (options) {
if (options.crossDomain && jQuery.support.cors) {
var http = (window.location.protocol === 'http:' ? 'http:' : 'https:');
options.url = http + '//cors-anywhere.herokuapp.com/' + options.url;
}
});

var share_link = $scope.insurance.website;//微信文章地址
$.get(
share_link,
function (response) {
var html = response;
html = html.replace(/data-src/g, "src");
var html_src = 'data:text/html;charset=utf-8,' + html;
$("iframe").attr("src", html_src);
});

jQuery的阿贾克斯注意事项

  • 由于浏览器的安全限制,大多数的Ajax请求都受到了同样的原产地政策 ; 请求不能成功地从不同的域,子域,端口或协议检索数据。
  • 脚本和JSONP请求不受同源策略的限制。

有一些方法来克服跨域障碍:

有一些插件与帮助跨域请求:

小心!

克服这个问题的最好方法,就是通过在后台创建您自己的代理,这样,您的代理将指向其他域中的服务,因为在后端存在不的同源策略的限制。但是,如果你不能这样做,在后端,然后注意以下提示。


警告!

使用第三方代理不是一个安全的做法,因为他们可以跟踪你的数据,因此它可以用公共信息中使用,但从来没有与私人数据。


使用下面所示的代码示例jQuery.get()jQuery.getJSON(),都是速记方法jQuery.ajax()


CORS Anywhere

CORS Anywhere是一个Node.js的代理它增加了CORS标头的代理请求。
要使用API,只是前缀与API网址的URL。(支持HTTPS:见GitHub的库

如果你想在需要时自动启用跨域请求,使用下面的代码片段:

$.ajaxPrefilter( function (options) {
if (options.crossDomain && jQuery.support.cors) {
var http = (window.location.protocol === 'http:' ? 'http:' : 'https:');
options.url = http + '//cors-anywhere.herokuapp.com/' + options.url;
//options.url = "http://cors.corsproxy.io/url=" + options.url;
}
}); $.get(
'http://en.wikipedia.org/wiki/Cross-origin_resource_sharing',
function (response) {
console.log("> ", response);
$("#viewer").html(response);
});

加载跨域的HTML页面AJAX的更多相关文章

  1. Ajax通过script src特性加载跨域文件 jsonp

    <!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Do ...

  2. form表单提交没有跨域问题,但ajax提交存在跨域问题

    浏览器的策略本质是:一个域名下面的JS,没有经过允许是不能读取另外一个域名的内容,但是浏览器不阻止你向另外一个域名发送请求. 所以form表单提交没有跨域问题,提交form表单到另外一个域名,原来页面 ...

  3. 分析https网页加载http资源导致的页面报错原因及其解决方案

    https网页加载http资源导致的页面报错及解决方案 https是当下的网站的主流趋势,甚至像苹果这样的大公司,则完全要求用户必须使用https地址. 然而对于以前http链接来说,我们往往就存在一 ...

  4. 利用简洁的图片预加载组件提升h5移动页面的用户体验

    在做h5移动页面,相信大家一定碰到过页面已经打开,但是里面的图片还未加载出来的情况,这种问题虽然不影响页面的功能,但是不利于用户体验.抛开网速的原因,解决这个问题有多方面的思路:最基本的,要从http ...

  5. 前端跨域问题,以及ajax,jsonp,json的区别

    看了很多网上的资料,小七感觉都没有完全解决我的疑惑以及问题,所以特意拿出通俗易懂的话讲解跨域问题,以及ajax,jsonp,json的区别.首先先说跨域问题什么时候需要跨域?[1]域名不同(即网址不同 ...

  6. reload() 方法用于重新加载当前文档。配合Ajax异步请求。

    1. reload() 方法, reload() 方法用于重新加载当前文档.配合Ajax异步请求. http://www.w3school.com.cn/jsref/met_loc_reload.as ...

  7. ajax跨域请求,页面和java服务端的写法

    方法一(jsonp): 页面ajax请求的写法: $.ajax({ type : "get", async : false, cache : false, url : " ...

  8. 案例(用封装的ajax加载数据库的数据到页面)

    本程序主要功能是以表格方式在网页上显示数据库的内容 LoadUsers.htm代码: <head> <title></title> <script src=& ...

  9. Cross-origin resource sharing JSON with Padding 同源策略 JSONP 为什么form表单提交没有跨域问题,但ajax提交有跨域问题? XMLHttpRequest and the Fetch API follow the same-origin policy 预检请求(preflight request)

    https://zh.wikipedia.org/wiki/跨来源资源共享 跨来源资源共享(CORS)是一份浏览器技术的规范,提供了 Web 服务从不同域传来沙盒脚本的方法,以避开浏览器的同源策略[1 ...

随机推荐

  1. javaSE基础05

    javaSE基础05:面向对象 一.数组 数组的内存管理 : 一块连续的空间来存储元素. Int [ ] arr = new int[ ]; 创建一个int类型的数组,arr只是一个变量,只是数组的一 ...

  2. git bash操作

    1. GIT说明 1> git是分布式,或者说是去中心化的.表现为: 开发者的可以在本地使用git并完美的控制自己的版本,而无需与服务端交互: 开发者可以将本地库在某个服务端备份,这种情况类似S ...

  3. webpack常用配置总结

    1. webpack简介 webpack 是一个模块打包工具.它使得模块相互依赖并且可构建等价于这些模块的静态资源.相比于已经存在的模块打包器(module bundler),webpack的开发动机 ...

  4. 开发webservice的方式

        什么是 web 服务? web 服务是对应用程序功能的网络访问接口,它是使用标准 Internet 技术构建的. 我们目前看到的部署在 Internet 上的 web 服务都是 HTML 网站 ...

  5. JS--该死的&&和||

    近段时间搞前端js,零零星星的看了一些框架源码,发现大量存在&&和||,其语法看的我是头冒青烟,也不知道怎么回事,度娘搜吧,现在写下来,以防忘掉. 先来约束一下用词:有一表达式A : ...

  6. WebService技术(二)— CXF

    前言:学习笔记,以供参考 Apache CXF 是一个开源的 Services 框架,CXF 帮助您利用 Frontend 编程 API 来构建和开发 Services .可以与Spring进行快速无 ...

  7. Android-Spinner [使用C# And Java实现]

    效果如下: C#实现代码 using Android.App; using Android.OS; using Android.Widget; namespace SpinnerDemo { [Act ...

  8. F#之旅0 - 开端

    F#之旅0 - 开端 UWP的学习告一段落,CozyRSS的UWP版本并没有做.UWP跟wpf开发几乎一模一样,然后又引入了很多针对移动设备的东西,这部分有点像android.没啥太大的意思,不难,估 ...

  9. Dev Cpp 输出中文字符问题

    最近 c++ 上机作业,vc++6.0 挂了没法用,只好用 Dev Cpp 先顶替一下,然而在遇到输出中文字符的时候出现了乱码的情况,但这种情况又非常诡异.于是简单了解了一下写成此博客. [写在前面] ...

  10. AC自动机专题

    AC自动机简介:KMP是用于解决单模式串匹配问题, AC自动机用于解决多模式串匹配问题. 精华:设这个节点上的字母为C,沿着他父亲的失败指针走,直到走到一个节点,他的儿子中也有字母为C的节点.然后把当 ...