Question

我正在尝试创建一个加载网站的应用，然后添加一些自定义CSS以将其调整为移动设备。

我正在使用window.open成功加载页面，我在loadstop上有一个回调函数，我正在调用browser.insertCSS，这就是问题所在。

如果我这样做：

browser.insertCSS({code:"body{background-color:red;}");

正确应用了样式。但是，如果我这样做：

browser.insertCSS({file:"mobile-style.css");

将相同的CSS添加到文件中，它不会被加载

我尝试了不同的路径（将文件放在www文件夹中，在css文件夹中，与JS文件位于同一文件夹中，并使用“./mobile-style.css”，“mobile-style”引用它。 css“，”/ / / mobile-style.css“，”/ mobile-style.css“但它们似乎都没有正确加载文件。

我看到了另一篇帖子What should file paths fed to insertCSS() be relative to?，其中提出了同样的问题，但没有接受的答案（我在那里尝试了这个建议但是没有用）。

非常感谢任何帮助。

由于

威尔

Answer 1

您必须等到inAppBrowser页面加载完成。

您必须添加一个事件监听器：

var inApp = window.open('mypage.html', '_blank', 'location=no');
inApp.addEventListener('loadstop', function(){
    inApp.insertCSS({
        file: 'inAppStyle.css'
    },onSuccess);
});

EDITED

将此路径用于您的Android项目文件：/// android_asset / {your folder}

信息：https://github.com/apache/cordova-plugin-file/blob/master/doc/index.md#android-file-system-layout

Answer 2

我无法找到合适的本地路径。相反，我只是将css文件上传到网络并提供了常规网址

file: 'http://mywebsite.com/path-if-needed/my.css'

由于InAppBrowser本身需要访问互联网，因此不具备外部依赖性，但并不是很重要。

Answer 3

我可能知道为什么它不会工作，这是因为你的路径不对，这个css文件不应该放在www文件夹中，也不应该把cordova项目文件夹，你应该把它放到服务器中例如，如果您的浏览器要访问http://192.168.1.1/admin，那么当浏览器位于192.168.1.1/admin下时，cordova只会获取此文件，它会获取服务器目录下的文件。我不会知道你是否使用任何调试工具，如果你使用它，它很容易找出出错的地方，你的控制台会记录错误，它获取css文件的路径并没有得到它。

Answer 4

如果你想在APP的沙盒中添加本地存储的外部CSS文件，而不是在互联网上，这是唯一的方法，就是你得到外部文件，你把它存储到一个字符串中变量，然后将此类代码插入浏览器。

var inAppBrowserRef = cordova.InAppBrowser.open(url, "_blank", "location=no");

//when load stops call loadedCallbackFunction
inAppBrowserRef.addEventListener('loadstop', loadedCallbackFunction);

function loadedCallbackFunction() {
    console.log("InAppBrowser Window loaded");

    $.ajax({
        type: "GET",
        url: cordova.file.applicationDirectory + "www/css/myExternalCSS.css",
        dataType: "text",   
        success: function (CSScode) {         

            inAppBrowserRef.insertCSS(
                { code:  JScode},
            function(){
                console.log("CSS code Inserted Succesfully into inApp Browser Window");
            });

        },
        error: function () {
           console.error("Ajax Error");

       }
    });
}

您需要cordova-plugin-inappbrowser

Phonegap：InAppBrowser insertCSS文件

4 个答案: