求助：无法对页面中iframe嵌套的页面加CSS
本帖最后由 Dover 于 2021-12-11 03:33 编辑更新-2021-12.11，其实也不算BUG，出于安全考虑，油猴拓展里“站点访问权限”我设置的是“仅点击时”才允许油猴运行。
我去油猴官网FAQ看了看，貌似要允许油猴在所有站点上允许此扩展读取和更改你所访问的网站上的所有数据。然后我更改后就能用了。
--------------------问题解决，多谢大佬李恒道远程协助，估计是EDGE和Tampermonkey插件的兼容性出了问题，遇到IFRAME刚好出现了BUG。
---------------------------------------------------
-----------------------------------------------
--------------------------------首先是脚本：
// ==UserScript==
// @name 手机上网去广告
// @namespace http://tampermonkey.net/
// @version 0.1
// @description去除手机访问网页版百度时的弹窗和广告；此脚本是给手机用的，在PC上F12选择手机模式进行调试，调试好以后复制到手机上
// @author Dover
// @match https://mbd.baidu.com/*
// @match https://www.baidu.com/*
// @icon data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==
// @grant none
// ==/UserScript==
(function () {
'use strict';
//**********************************************************//
console.log("脚本已执行到function内部")
if (location.href.indexOf('www.baidu.com') > 0) {
console.log("www子网站触发" + location.href)
}
if (location.href.indexOf('mbd.baidu.com') > 0) {
console.log("mbd子网站触发？然鹅，并没有，只是因为href里同时带有www网址和mdb网址" + location.href)
}
if (location.href.indexOf('mbd.baidu.com') > 0 && location.href.indexOf('www.baidu.com') == -1) {
console.log("mbd子网站触发" + location.href)
var news_css = document.createElement("style");
news_css.innerText = "*{color:red !important}；.related-news{display:none !important}";
document.head.appendChild(news_css);
}
//**********************************************************//
})();
我闲着没事儿的时候会用手机看百度首页的新闻，手机端的百度首页是有新闻的，和电脑端不一样。从首页的新闻列表页进入新闻内容页后，有时会弹窗让下载APP，我打算用脚本去除弹窗和一些不需要的DIV。
随便打开一条新闻，比如：https://www.baidu.com/#iact=wiseindex%2Ftabs%2Fnews%2Factivity%2Fnewsdetail%3D%257B%2522linkData%2522%253A%257B%2522name%2522%253A%2522iframe%252Fmib-iframe%2522%252C%2522id%2522%253A%2522feed%2522%252C%2522index%2522%253A0%252C%2522url%2522%253A%2522https%253A%252F%252Fmbd.baidu.com%252Fnewspage%252Fdata%252Flandingpage%253Fs_type%253Dnews%2526dsp%253Dwise%2526context%253D%25257B%252522nid%252522%25253A%252522news_9593425933815176662%252522%25257D%2526pageType%253D1%2526n_type%253D1%2526p_from%253D-1%2526innerIframe%253D1%2522%252C%2522isThird%2522%253Afalse%252C%2522title%2522%253Anull%257D%257D
ps.
上面的网址解码后会发现其实它明文写了mbd开头的真实的新闻地址，所以你用location.href.indexOf('mbd.baidu.com')和location.href.indexOf('www.baidu.com')检测这个网址都会返回真TRUE。
这个内容页内嵌的iframe内容是：
<iframe name="__SF__0" src="https://mbd.baidu.com/newspage/data/landingpage?s_type=news&dsp=wise&context=%7B%22nid%22%3A%22news_9593425933815176662%22%7D&pageType=1&n_type=1&p_from=-1&innerIframe=1#viewportType=virtual&paddingTop=54&pageType=&pageInfo=" data-src="null" sandbox="allow-popups allow-scripts allow-forms allow-pointer-lock allow-popups-to-escape-sandbox allow-same-origin allow-modals allow-top-navigation" scrolling="yes" style="height: 100%; display: block;">
真正的新闻内容都在这个实际网址mbd开头的iframe里。
如脚本代码所示，我将mbd.baidu.com和www.baidu.com都加入了match，油猴检测到iframe后应该会自动进入iframe，然而实测并没有，所以理论上语句“console.log("mbd子网站触发" + location.href)”应该会在控制台显示出来，但实际没有。我也试了contentWindow.document，然而这个网址的contentWindow并没有document。琢磨了一天了没想明白为什么。有考虑过元素可能没加载出来，试过setTimeout，发现iframe貌似是后加载出来的，请各位大佬帮看看，谢谢。
------------------------------------------------------
还有就是mdb开头的真实新闻地址貌似也蛮奇怪的。
这个里面有个DIV叫“相关阅读”，class是related-news，我针对这个mdb开头的页面写了个脚本，发现针对class是related-news的DIV应用样式{color:red !important}是不起作用的(应用display等也不起作用)，但是对所有元素用*{color:red !important}是起作用的。查看代码这个related-news默认只有一个background-color是#fff;的样式。不改加不上啊。JS纯小白求助，谢谢。
Dover 发表于 2021-12-10 00:12
多谢回复，用的是Tampermonkey，从微软官方插件商店直接安装的，版本4.13.6138，是最新版的，应该不是它的 ...
特意换了个edge，也复现成功了...
可以加我QQ给你远程看一下
QQ4548212 不太理解具体哪里遇到了问题
大概测试了下脚本
我这里显示子网站是触发的呀
我测试也是触发的，应该是设置的问题，检查下你的控制台设置是否勾选了“仅限已选择的上下文”。
判断条件建议改成location.hostname === 'mbd.baidu.com'
iframe与主页面的加载不一定同步，在确定没有跨域的情况下，如果获取不到contentWindow.document，需要监听一下iframe的load事件，在其加载完毕后再获取document。
color的问题是related-news的子元素设置了自己的color，这个属性跟display不一样，不会被父元素覆盖，如果你希望对子元素生效应该这样写：.related-news *{color:red !important}
display的问题是你多打了一个分号（还是全角的），两句css之间不需要用符号分隔。 cxxjackie 发表于 2021-12-9 21:07
我测试也是触发的，应该是设置的问题，检查下你的控制台设置是否勾选了“仅限已选择的上下文”。
判断条件 ...
老大，碰到个问题
https://live.kuaishou.com/profile/3x72uw4df7wdq8q
这种快手页面是vue的，找不到vue的视频信息
不知道有没有什么相关的处理手段和经验
我研究了一下没想法...
(是美女社会摇，请在周围没人打开) 多谢两位大佬指点，我用的是EDGE浏览器，应该是谷歌内核，重新试了下还是不行，控制台截图如下： Dover 发表于 2021-12-9 22:23
多谢两位大佬指点，我用的是EDGE浏览器，应该是谷歌内核，重新试了下还是不行，控制台截图如下： ...
可以在第三个if那里打个debugger断点追一下为什么没进去 Dover 发表于 2021-12-9 22:23
多谢两位大佬指点，我用的是EDGE浏览器，应该是谷歌内核，重新试了下还是不行，控制台截图如下： ...
有没有可能是油猴的问题？最好使用Tampermonkey，并升级到最新版本。 李恒道 发表于 2021-12-9 21:51
老大，碰到个问题
https://live.kuaishou.com/profile/3x72uw4df7wdq8q
这种快手页面是vue的，找不到vue ...
这个我说一下调试过程吧，首先审查相关元素并刷新页面，可以看到页面加载过程中.work-card-thumbnail这部分元素被添加了一个ready的class，右键打一个属性修改的断点并再次刷新，在断到的代码上下文可以看到一个e，e.context就是vue组件，里面包含了这个视频的信息，要得到所有视频就找$parent，可以发现$panrent.list即所有视频信息，最后看一下parent的$el，可以得到这样一条路径：document.querySelector('.load-more > div:nth-child(3)').__vue__.list cxxjackie 发表于 2021-12-9 23:24
这个我说一下调试过程吧，首先审查相关元素并刷新页面，可以看到页面加载过程中.work-card-thumbnail这部 ...
这个我说一下调试过程吧，首先审查相关元素并刷新页面，可以看到页面加载过程中.work-card-thumbnail这部分元素被添加了一个ready的class
这部分大佬是怎么确定的
我调试的hi后ready加载的很快，不知道怎么确定出来的他会添加ready
页:
[1]
2