之前写了一些静态的html页面引用了一些外部的css样式

Posted 2023-04-08

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了之前写了一些静态的html页面引用了一些外部的css样式相关的知识，希望对你有一定的参考价值。

本来没什么问题但是今天下了一个文本编辑软件之后，发现html页面打开之后样式都没有了
SEC7113: CSS 因 Mime 类型不匹配而被忽略报这样一个错误.请问这是怎么回事？

这个方法你可以尝试一下，步骤如下：
1、下载FileTypesMan，百度即可找到，只有60多K
2、解压运行FileTypesMan.exe，程序会花一点时间查找所有的文件格式，稍等一下即可
3、在列表中找到.css，双击进入到“编辑文件类型”界面
4、在MIME类型那里，修改为text/css
5、点确定，大功告成~ 参考技术A 你就用记事本打开看看啊

iOS端执行包含外部引用的js并相互通信

背景

某些情况下，需要调用js的一些代码来执行一些操作，并且将处理结果回传到OC。

概述

为了执行一段包含外部引用的js，需要使用UIWebView，通过fileURL去加载一个js或者HTML页面，为了方便的在两个语言之间通信，需要借助一个第三方框架WebViewJavascriptBridge，它可以实现跨语言的请求与回调。

实现

本文讨论的是，从OC调用WebView加载的js的某个方法来处理数据，并且回调处理结果。这里有两个关键点，一是加载的js文件能够处理外部引用，二是OC可以调用js并且回传结果。

加载包含外部引用的js

使用webView的loadRequest:方法，加载一个本地的HTML文件可以实现执行包含外部引用的js。为了证明可以引入外部js，我们引入一个jquery，并且在document.ready中执行后续操作，具体步骤如下。

1.将html与js加入到bundle中

其中index.html中包含的是要执行的js，内容如下:
setupWebViewJavascriptBridge是JSBridge的内容，用于设置桥接。

<body>
    <script type="text/javascript" src="jquery.min.js"></script>
    <script type="text/javascript">
        function setupWebViewJavascriptBridge(callback) 
            if (window.WebViewJavascriptBridge)  return callback(WebViewJavascriptBridge); 
            if (window.WVJBCallbacks)  return window.WVJBCallbacks.push(callback); 
            window.WVJBCallbacks = [callback];
            var WVJBIframe = document.createElement('iframe');
            WVJBIframe.style.display = 'none';
            WVJBIframe.src = 'wvjbscheme://__BRIDGE_LOADED__';
            document.documentElement.appendChild(WVJBIframe);
            setTimeout(function()  document.documentElement.removeChild(WVJBIframe) , 0)
        
        $(document).ready(function()
            alert('document ready');
            setupWebViewJavascriptBridge(function(bridge)
                bridge.registerHandler('js_handler', function(data, callback) 
                   alert('JS Receive: ' + data);
                   callback('<data after calculate>');
                )
            );
        );
    </script>
</body>

2.在控制器中创建一个webView，并且加载index.html

@interface ViewController () <UIWebViewDelegate>

@property (nonatomic, strong) UIWebView *webView;
@property (nonatomic, strong) WebViewJavascriptBridge *bridge;

@end

- (void)viewDidLoad 
    [super viewDidLoad];
    UIWebView *wb = [[UIWebView alloc] initWithFrame:CGRectZero];
    // 设置代理，可以通过拦截请求的方式回调
    wb.delegate = self;
    self.webView = wb;
    // 通过request方式加载本地文件
    NSURLRequest *request = [NSURLRequest requestWithURL:[NSURL fileURLWithPath:[[NSBundle mainBundle] pathForResource:@"index.html" ofType:nil]]];
    [wb loadRequest:request];
    // 通过JSBridge实现调用js方法
    self.bridge = [WebViewJavascriptBridge bridgeForWebView:wb];
    // 调用js代码中注册的名为js_handler的方法，并且传递参数data，当js中处理完后，调用callback会回调到responseCallback:并且传递responseData回来
    [self.bridge callHandler:@"js_handler" data:@"<data from objc>" responseCallback:^(id responseData) 
        NSLog(@"收到来自js的回调数据 %@", responseData);
    ];

3.分析调用过程

首先看一下index.html中的js代码

<body>
    <script type="text/javascript" src="jquery.min.js"></script>
    <script type="text/javascript">
        // 配置桥接的代码，来自github的WebViewJavascriptBridge给出的示例
        function setupWebViewJavascriptBridge(callback) 
            if (window.WebViewJavascriptBridge)  return callback(WebViewJavascriptBridge); 
            if (window.WVJBCallbacks)  return window.WVJBCallbacks.push(callback); 
            window.WVJBCallbacks = [callback];
            var WVJBIframe = document.createElement('iframe');
            WVJBIframe.style.display = 'none';
            WVJBIframe.src = 'wvjbscheme://__BRIDGE_LOADED__';
            document.documentElement.appendChild(WVJBIframe);
            setTimeout(function()  document.documentElement.removeChild(WVJBIframe) , 0)
        
        // 使用document.ready证明可以处理外部引用
        $(document).ready(function()
            alert('document ready');
            // 调用上面的方法配置桥接，并且定义一个名为js_handler的方法，接收OC传递来的data，并且通过callback回调。
            setupWebViewJavascriptBridge(function(bridge)
                bridge.registerHandler('js_handler', function(data, callback) 
                   alert('JS Receive: ' + data);
                   callback('<data after calculate>');
                )
            );
        );
    </script>
</body>

在代码开始运行后，首先webView加载了js，js通过alert显示document ready，然后完成桥接的配置。紧接着运行OC中配置桥接的代码，并调用js中的js_handler，传递数据，js_handler收到数据后，通过alert显示收到的数据data，并且将处理后的数据经过callback回调到OC的responseCallback这个block，这时候在控制台可以看到收到js回调的log。

4.另一种js回调到OC的方式

上面的代码设置了webView的代理为当前控制器，webView在每次加载一个请求时都会通过代理询问是否加载该请求，只要在这里拦截特定请求，即可实现通信。

我们可以在js中需要回传数据的时候通过window.location.href=””实现一个请求，注意这里不要直接使用ajax请求，否则会产生跨域的问题。

通过url中带数据的方式即可实现js到OC的通信，为了区分传统的请求，我们可以以app://开头，例如app://result=0x28，代表处理结果为0x28，只需要在拦截时判断是否是app协议，并且通过正则等手段取出url中的参数即可，具体的代理方法如下。

- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType 
    NSString *urlStr = request.URL.absoluteString;
    // 这里把app协议的请求拦截下来处理
    if ([urlStr hasPrefix:@"app://"]) 
        NSString *content = [urlStr substringFromIndex:6];
        NSLog(@"%@", content);
        return NO;
    
    return YES;