ios 我可以在移动的Safari上用user-css覆盖CSS吗？

ffscu2ro 于 2023-03-20 发布在 iOS

关注(0)|答案(6)|浏览(143)

我正在为我的祖母修改网站http://www.baomoi.com的CSS。我想为她修改CSS以使其更容易阅读，并使其更简约。我尝试使用JavaScript书签：

javascript:(function(){if%20(!document.getElementById('someuniqueid')){var%20objHead%20=%20document.getElementsByTagName('head');%20if%20(objHead[0]){if%20(document.createElementNS%20&&%20objHead[0].tagName%20==%20'head')%20var%20objCSS%20=%20objHead[0].appendChild(document.createElementNS('http://www.w3.org/1999/xhtml',%20'link'));%20else%20var%20objCSS%20=%20objHead[0].appendChild(document.createElement('link'));%20objCSS.id%20=%20'someuniqueid';%20objCSS.rel%20=%20'stylesheet';%20objCSS.href%20=%20'http://fu.com/minimal.css';%20objCSS.type%20=%20'text/css';}}})()

这在最初加载时有效一次，但是当在站点上单击另一个链接时，它会加载回默认站点的CSS。
有没有可能将站点包含在iframe中，并使CSS在整个站点中保持持久性？
或者创建一个本地iPad应用程序来加载网站并永久插入CSS会更容易吗？
我找到了this idea（archived version）;但刚刚下载了Xcode SDK，如果有更简单的方法的话，不想钻研仅仅为此创建iPad应用程序。
实际上，我只需要更改站点baomoi.com的CSS，并使其在单击链接时始终保持不变。
如有任何想法和建议，我们将不胜感激。
谢谢大家！
编辑：我现在正在看（CSSPivot），再次感谢您的建议，我是新的移动的Safari，我已经注意到iframes没有滚动条的原因。
还有什么建议去的路线，使一个实际的iPad应用程序，将能够做到这一点，以及？我正在考虑寻找自由职业者或类似的网站，我可以找到人为我创建这个，因为我没有经验，在开发的IOS。
iPad对我祖母来说是一个很容易使用的设备，我想把它放在她可以访问几个网站的地方（越南网站，但对她来说导航相当复杂，配色方案也很难看清）。
再次提前感谢您的建议。

ios

来源：https://stackoverflow.com/questions/6916335/can-i-over-ride-css-with-user-css-on-mobile-safari

6条答案

按热度按时间

js4nwp541#

Firefox的GreaseMonkey plugin（或Chrome的TamperMonkey plugin）可能非常适合您尝试完成的任务，您可以指定特定站点以及应在该站点上运行的脚本。
在Userscripts.org: Power-ups for your browser上有几个社区脚本可用，或者您已经创建了自己的脚本。

编辑：

使用csspivot.com（编辑：失效网址）
你可以重写一个网站的CSS并用保存在cspivot上的URL重新访问它。

赞(0）回复(0）举报 2023-03-20

kdfy810k2#

桌面Safari将这两个值存储到defaults read com.apple.safari中：

WebKitUserStyleSheetEnabledPreferenceKey = 1;
WebKitUserStyleSheetLocationPreferenceKey = "~/custom.css";

我尝试将这些首选项添加到移动的Safari属性列表，但它们不起作用：
(can使用'' plutil ''检查首选项）：

$ plutil -show /private/var/mobile/Library/Preferences/com.apple.mobilesafari.plist
$ plutil -show /private/var/mobile/Library/Preferences/com.apple.Preferences.plist

这将是最好的解决方案，如果它能工作的话。所以看起来自定义CSS支持没有编译到MobileSafari中。

赞(0）回复(0）举报 2023-03-20

yquaqz183#

2022年更新：*

可能的解决方案

（直到苹果最终允许user stylesheets在移动的设备上使用，就像他们目前允许在macOS Safari上使用一样）*

iOS/iPadOS Safari extension * 可能 * 能够做到这一点，但我个人不知道if one already exists。

根据目标网站的“cross-site”/“cross-frame”scripting设置，在从iOS主屏幕图标启动的 “iframe” 中加载该网站 * 可能 * 是possible。
- （这对大多数网站不起作用，但值得一试，因为它不需要任何编程或特殊软件。）*
最坏的情况是，在iPad （或者是大屏幕的iPhone？） 上，可以添加JavaScript bookmarklet来重新格式化 * 任何 * 页面的CSS。
- （每个新页面都需要单击此按钮，但如果将其放置在Safari的“收藏夹栏”中，则在出现阅读问题时只需单击一下即可完成。）*
示例：*

示例Javascript （适用于上述选项#3）

function addStyleString(str) {
    var node = document.createElement('style');
    node.innerHTML = str;
    document.body.appendChild(node);
}
// Source: 
// 0. https://caiorss.github.io/bookmarklet-maker/
// 1. https://apple.stackexchange.com/questions/377492/is-css-injection-possible-on-ipad-using-safari
// 2. https://macreports.com/how-to-change-color-of-visited-links-in-safari-macos/
// 3. https://www.w3schools.com/cssref/css_colors.asp
// 4. https://www.w3schools.com/cssref/css_default_values.asp
// 5. https://www.w3schools.com/css/css_link.asp

// addStyleString('body { color: pink !important }');
// addStyleString('body { background: silver !important }');

// Try to create a user stylesheet for iOS Safari - jhg
// Can I do other things, such as underlines or boxes?
addStyleString('a {color: pink !important }');
addStyleString('a:link {color: red !important }');
addStyleString('a:visited {color: green !important }');
addStyleString('a:hover {color: hotpink !important }');
addStyleString('a:active {color: orange !important }');

// addStyleString('a:visited { color: #FF0000 !important; }');
// This way allows you to add CSS in multiple passes

// Call completion to finish
completion();

// END JS

相同的JavaScript代码，编码为“bookmarklet”

（使用‘bookmarklet-maker’ by @caiorss从上述JavaScript创建）*

javascript:(function()%7Bfunction%20addStyleString(str)%20%7B%0A%20%20%20%20var%20node%20%3D%20document.createElement('style')%3B%0A%20%20%20%20node.innerHTML%20%3D%20str%3B%0A%20%20%20%20document.body.appendChild(node)%3B%0A%7D%0A%2F%2F%20Source%3A%20%0A%2F%2F%200.%20https%3A%2F%2Fcaiorss.github.io%2Fbookmarklet-maker%2F%0A%2F%2F%201.%20https%3A%2F%2Fapple.stackexchange.com%2Fquestions%2F377492%2Fis-css-injection-possible-on-ipad-using-safari%0A%2F%2F%202.%20https%3A%2F%2Fmacreports.com%2Fhow-to-change-color-of-visited-links-in-safari-macos%2F%0A%2F%2F%203.%20https%3A%2F%2Fwww.w3schools.com%2Fcssref%2Fcss_colors.asp%0A%2F%2F%204.%20https%3A%2F%2Fwww.w3schools.com%2Fcssref%2Fcss_default_values.asp%0A%2F%2F%205.%20https%3A%2F%2Fwww.w3schools.com%2Fcss%2Fcss_link.asp%0A%0A%2F%2F%20addStyleString('body%20%7B%20color%3A%20pink%20!important%20%7D')%3B%0A%2F%2F%20addStyleString('body%20%7B%20background%3A%20silver%20!important%20%7D')%3B%0A%0A%2F%2F%20Try%20to%20create%20a%20user%20stylesheet%20for%20iOS%20Safari%20-%20jhg%0A%2F%2F%20Can%20I%20do%20other%20things%2C%20such%20as%20underlines%20or%20boxes%3F%0A%0AaddStyleString('a%20%7Bcolor%3A%20pink%20!important%20%7D')%3B%0AaddStyleString('a%3Alink%20%7Bcolor%3A%20red%20!important%20%7D')%3B%0AaddStyleString('a%3Avisited%20%7Bcolor%3A%20green%20!important%20%7D')%3B%0AaddStyleString('a%3Ahover%20%7Bcolor%3A%20hotpink%20!important%20%7D')%3B%0AaddStyleString('a%3Aactive%20%7Bcolor%3A%20orange%20!important%20%7D')%3B%0A%0A%2F%2F%20addStyleString('a%3Avisited%20%7B%20color%3A%20%23FF0000%20!important%3B%20%7D')%3B%0A%2F%2F%20This%20way%20allows%20you%20to%20add%20CSS%20in%20multiple%20passes%0A%0A%2F%2F%20Call%20completion%20to%20finish%0Acompletion()%3B%7D)()%3B

相同的JavaScript代码，URL编码以包含在HTML页面中

（使用‘bookmarklet-maker’ by @caiorss从上述JavaScript创建）*

<a href="javascript:(function()%7Bfunction%20addStyleString(str)%20%7B%0A%20%20%20%20var%20node%20%3D%20document.createElement('style')%3B%0A%20%20%20%20node.innerHTML%20%3D%20str%3B%0A%20%20%20%20document.body.appendChild(node)%3B%0A%7D%0A%2F%2F%20Source%3A%20%0A%2F%2F%200.%20https%3A%2F%2Fcaiorss.github.io%2Fbookmarklet-maker%2F%0A%2F%2F%201.%20https%3A%2F%2Fapple.stackexchange.com%2Fquestions%2F377492%2Fis-css-injection-possible-on-ipad-using-safari%0A%2F%2F%202.%20https%3A%2F%2Fmacreports.com%2Fhow-to-change-color-of-visited-links-in-safari-macos%2F%0A%2F%2F%203.%20https%3A%2F%2Fwww.w3schools.com%2Fcssref%2Fcss_colors.asp%0A%2F%2F%204.%20https%3A%2F%2Fwww.w3schools.com%2Fcssref%2Fcss_default_values.asp%0A%2F%2F%205.%20https%3A%2F%2Fwww.w3schools.com%2Fcss%2Fcss_link.asp%0A%0A%2F%2F%20addStyleString('body%20%7B%20color%3A%20pink%20!important%20%7D')%3B%0A%2F%2F%20addStyleString('body%20%7B%20background%3A%20silver%20!important%20%7D')%3B%0A%0A%2F%2F%20Try%20to%20create%20a%20user%20stylesheet%20for%20iOS%20Safari%20-%20jhg%0A%2F%2F%20Can%20I%20do%20other%20things%2C%20such%20as%20underlines%20or%20boxes%3F%0A%0AaddStyleString('a%20%7Bcolor%3A%20pink%20!important%20%7D')%3B%0AaddStyleString('a%3Alink%20%7Bcolor%3A%20red%20!important%20%7D')%3B%0AaddStyleString('a%3Avisited%20%7Bcolor%3A%20green%20!important%20%7D')%3B%0AaddStyleString('a%3Ahover%20%7Bcolor%3A%20hotpink%20!important%20%7D')%3B%0AaddStyleString('a%3Aactive%20%7Bcolor%3A%20orange%20!important%20%7D')%3B%0A%0A%2F%2F%20addStyleString('a%3Avisited%20%7B%20color%3A%20%23FF0000%20!important%3B%20%7D')%3B%0A%2F%2F%20This%20way%20allows%20you%20to%20add%20CSS%20in%20multiple%20passes%0A%0A%2F%2F%20Call%20completion%20to%20finish%0Acompletion()%3B%7D)()%3B">Color links</a>

要在iOS/iPadOS上的 Safari 网络浏览器中添加小书签：

注意：出于安全原因，它们无法轻松地将书签添加到移动的Safari。*

1.首先，单击“共享”图标并选择“添加到收藏夹”（在 * 任何 * 网页上）
1.删除预填充的标题，输入书签链接的名称 （例如“Color links”或“Fix this page”），然后单击“Save”。
1.打开“书签”列表，单击“收藏夹”，然后找到您刚刚创建的新项目。
1.按下“编辑”并点击该新项目。现在您可以删除预先填写的地址并粘贴您的JavaScript bookmarklet代码。
1.按下“返回”，您的书签小程序就可以在任何页面上测试了。
1.* （可选）* 再按一次“编辑”，然后使用同一项目右侧的三条水平线在列表中向上或向下拖动该项目。（移动的Safari的“收藏夹栏”将仅显示屏幕上可容纳的链接，从“收藏夹”列表的顶部开始。）

赞(0）回复(0）举报 2023-03-20

zpgglvta4#

我不确定在iOS上是否可行，但在Android上我会使用WebView元素，覆盖URL加载并将样式表重定向到自定义样式表。
否则，也许你可以使用一个代理服务器，能够重写网址？

赞(0）回复(0）举报 2023-03-20

ohtdti5x5#

使用名为停止疯狂的Safari扩展来注入自定义CSS或JS。

赞(0）回复(0）举报 2023-03-20

hmae6n7t6#

Safari允许你在浏览器中使用自定义样式表，这是我发现的最简单的方法。
看看浏览器首选项，你会发现自定义样式表的选项。

赞(0）回复(0）举报 2023-03-20