Phonegap: InAppBrowser插入CSS文件

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"、"/www/mobile-style.css"、"/mobile-style.css"引用它们，但似乎都不能正确加载文件。

我看到了另一篇帖子（链接）上有人问了同样的问题，但是没有被接受的答案（我尝试了那里的建议，但没用）。

非常感谢任何帮助。

谢谢

• Will

- willvv

Answer 1

你需要等待InAppBrowser页面加载完成。

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

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

编辑完成

在您的 Android 项目中使用此路径 file:///android_asset/{your folder}。

提示：请参考 https://github.com/apache/cordova-plugin-file/blob/master/doc/index.md#android-file-system-layout了解更多关于 Android 文件系统布局的信息。

- Albestio

---

谢谢您的回答，然而这正是我正在做的事情，我的问题是：我需要把CSS文件放在哪里？ - willvv

那个路径是你的 /www 文件夹。 那 /android_asset/css/inAppStile.css 文件呢？ 祝你好运！;) - Albestio

Answer 2

我可能知道为什么它不起作用，因为您的路径不正确，这个CSS文件不应该放在www文件夹或cordova项目文件夹中，而应该放在服务器上。例如，如果您的浏览器要访问http://192.168.1.1/admin，那么当浏览器在192.168.1.1/admin下时，cordova才会获取此文件，并在服务器目录下获取该文件。我不知道您是否使用任何调试工具，如果使用，则很容易找出问题所在，您的控制台将记录错误，显示哪个路径获取了CSS文件但未获取到。

- Jieyu Zhang

Answer 3

我找不到正确的本地路径。相反，我将CSS文件上传到Web并提供常规URL。

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

虽然有外部依赖并不理想，但因为InAppBrowser本身需要互联网访问，所以并不是什么大问题。

- Scott Lawton

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 插件。

- João Pimentel Ferreira