使用ajax请求在新页面打开html文本

一时失言乱红尘 2022-03-26 14:20 367阅读 0赞

目前项目使用的大前端的开发方式，使用token作为前后台交互的凭证，但是遇到这样一个问题收集平板终端需要显示一个webview,这个webview还可以继续访问其他页面。这种不想jsp有session,cookie这种回话机制维护，也不向前端项目有路由交互，所以需要将html文本在新页面中显示出来。其实js打开一个新页面很简单，window.open(url)，但是这个web1.0的方式传递不了header等复杂信息，如果要传递的话就要使用ajax。

ajax将文本获取回来后怎么显示呢，

（1）将本页面中的body元素的innerHTML替换掉，这样简单的html文本可以，这种只能在本页面渲染，不能回退。并且如果遇到复杂的带css，js文件，外部样式的完整的htm就不行了，恰巧我遇到的就是要显示这种

（2）这种方式是我从看别人也有这种问题，其他答主的回答

$.ajax({
    url: '…………',
    success: function(resp){
    var newWin = window.open('', '_blank');
    newWin.document.write(resp);
    }
    });

方式很巧妙，可以回退，但是同样只能处理简单的html文本，遇到复杂js，css照样不渲染，歇菜

最后本猿还是想到了一个方式，将文本保存到流中，然后放到a标签中，调用js点击，显示。不说了，上代码

$.ajax({
    url: '…………',
    success: function (res) {
                        var content = res;
                        var data = new Blob([content],{type:"text/html"});
                        var downloadUrl = window.URL.createObjectURL(data);
                        var anchor = document.createElement("a");
                        anchor.href = downloadUrl;
                        anchor.click();
                    }   
    });

ok，搞定。

20190118 更新。。。

经过终端测试，安卓端是可以的，IOS却点击不了，经过IOS开发的小伙伴调查，终于得出结果，使用正常的url点击不用处理，但是如果href是Bolb的话要在webview使用的时候添加WKNavigationActionPolicyAllow配置