Injecting CSS rules into the page in Android Browser

浪子不回头ぞ 提交于 2019-12-24 20:00:01

问题


I'm writing a JavaScript to inject a new CSS rule into pages in Android browser in order to display some text in a custom CSS font (after some replacement).

Here is how I tried to inject the CSS rule:

var css = '@font-face {font-family:"font"; src:url(http://www.example.com/font.ttf);} si{font-family:"font"}';
if(document.getElementsByTagName("style")[0]){
   var style = document.getElementsByTagName("style")[0];
} else {
   var style = document.createElement("style");
   style.type = "text/css";
   document.getElementsByTagName("HEAD")[0].appendChild(style);
}
var sheet = style.sheet;
sheet.insertRule(css, sheet.cssRules.length);

Then the text is replaced using a JavaScript XPath implementation. Replacing lines are in this model:

text = text.replace(/\'/g, "<si>♥</si>");

The text replacement happens perfectly. But the injecting CSS rule part is not working. The replaced text is just shown as <si>♥</si> (with tags also printed). :(

Can anyone please correct my code of injecting CSS rule or please suggest some other way to do this.

Thanks!

Update: I'm emulating this in Android 2.2 which supports CSS fonts.


回答1:


@font-face seems to be broken on Android 2.0 and 2.1 (bug tracker).



来源:https://stackoverflow.com/questions/3949056/injecting-css-rules-into-the-page-in-android-browser

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!