上一主题 下一主题
ScriptCat,新一代的脚本管理器脚本站,与全世界分享你的用户脚本油猴脚本开发指南教程目录
12下一页
返回列表 发新帖

求助:无法对页面中iframe嵌套的页面加CSS

[复制链接]

该用户从未签到

1

主题

3

帖子

19

积分

助理工程师

Rank: 1

积分
19
发表于 2021-12-9 19:01:10 | 显示全部楼层 | 阅读模式
1油猫币
本帖最后由 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纯小白求助,谢谢。




最佳答案

查看完整内容

特意换了个edge,也复现成功了... 可以加我QQ给你远程看一下 QQ4548212
  • TA的每日心情

    2022-6-4 20:51
  • 签到天数: 32 天

    [LV.5]常住居民I

    332

    主题

    2896

    帖子

    2908

    积分

    荣誉开发者

    非物质文化遗产社会摇传承人

    Rank: 10Rank: 10Rank: 10

    积分
    2908

    猫咪币纪念章

    发表于 2021-12-9 19:01:11 | 显示全部楼层
    Dover 发表于 2021-12-10 00:12
    多谢回复,用的是Tampermonkey,从微软官方插件商店直接安装的,版本4.13.6138,是最新版的,应该不是它的 ...

    特意换了个edge,也复现成功了...
    可以加我QQ给你远程看一下
    QQ4548212
    混的人。
    ------------------------------------------
    進撃!永遠の帝国の破壊虎---李恒道
    个人宣言:この世界で私に胜てる人とコードはまだ生まれていません。死ぬのが怖くなければ来てください。
    回复

    使用道具 举报

  • TA的每日心情

    2022-6-4 20:51
  • 签到天数: 32 天

    [LV.5]常住居民I

    332

    主题

    2896

    帖子

    2908

    积分

    荣誉开发者

    非物质文化遗产社会摇传承人

    Rank: 10Rank: 10Rank: 10

    积分
    2908

    猫咪币纪念章

    发表于 2021-12-9 20:41:28 | 显示全部楼层

    不太理解具体哪里遇到了问题

    大概测试了下脚本

    我这里显示子网站是触发的呀

    图片.png

    混的人。
    ------------------------------------------
    進撃!永遠の帝国の破壊虎---李恒道
    个人宣言:この世界で私に胜てる人とコードはまだ生まれていません。死ぬのが怖くなければ来てください。
    回复

    使用道具 举报

  • TA的每日心情
    慵懒
    2022-3-8 11:41
  • 签到天数: 2 天

    [LV.1]初来乍到

    10

    主题

    355

    帖子

    433

    积分

    荣誉开发者

    Rank: 10Rank: 10Rank: 10

    积分
    433

    活跃会员热心会员突出贡献三好学生猫咪币纪念章中秋纪念章国庆纪念章

    发表于 2021-12-9 21:07:51 | 显示全部楼层
    我测试也是触发的,应该是设置的问题,检查下你的控制台设置是否勾选了“仅限已选择的上下文”。
    判断条件建议改成location.hostname === 'mbd.baidu.com'
    iframe与主页面的加载不一定同步,在确定没有跨域的情况下,如果获取不到contentWindow.document,需要监听一下iframe的load事件,在其加载完毕后再获取document。
    color的问题是related-news的子元素设置了自己的color,这个属性跟display不一样,不会被父元素覆盖,如果你希望对子元素生效应该这样写:.related-news *{color:red !important}
    display的问题是你多打了一个分号(还是全角的),两句css之间不需要用符号分隔。
    回复

    使用道具 举报

  • TA的每日心情

    2022-6-4 20:51
  • 签到天数: 32 天

    [LV.5]常住居民I

    332

    主题

    2896

    帖子

    2908

    积分

    荣誉开发者

    非物质文化遗产社会摇传承人

    Rank: 10Rank: 10Rank: 10

    积分
    2908

    猫咪币纪念章

    发表于 2021-12-9 21:51:07 | 显示全部楼层
    cxxjackie 发表于 2021-12-9 21:07
    我测试也是触发的,应该是设置的问题,检查下你的控制台设置是否勾选了“仅限已选择的上下文”。
    判断条件 ...

    老大,碰到个问题
    https://live.kuaishou.com/profile/3x72uw4df7wdq8q
    这种快手页面是vue的,找不到vue的视频信息
    不知道有没有什么相关的处理手段和经验
    我研究了一下没想法...
    (是美女社会摇,请在周围没人打开)
    混的人。
    ------------------------------------------
    進撃!永遠の帝国の破壊虎---李恒道
    个人宣言:この世界で私に胜てる人とコードはまだ生まれていません。死ぬのが怖くなければ来てください。
    回复

    使用道具 举报

    该用户从未签到

    1

    主题

    3

    帖子

    19

    积分

    助理工程师

    Rank: 1

    积分
    19
    发表于 2021-12-9 22:23:55 | 显示全部楼层
    多谢两位大佬指点,我用的是EDGE浏览器,应该是谷歌内核,重新试了下还是不行,控制台截图如下:
    001.png
    02.png
    回复

    使用道具 举报

  • TA的每日心情

    2022-6-4 20:51
  • 签到天数: 32 天

    [LV.5]常住居民I

    332

    主题

    2896

    帖子

    2908

    积分

    荣誉开发者

    非物质文化遗产社会摇传承人

    Rank: 10Rank: 10Rank: 10

    积分
    2908

    猫咪币纪念章

    发表于 2021-12-9 22:39:48 | 显示全部楼层
    Dover 发表于 2021-12-9 22:23
    多谢两位大佬指点,我用的是EDGE浏览器,应该是谷歌内核,重新试了下还是不行,控制台截图如下: ...

    可以在第三个if那里打个debugger断点追一下为什么没进去
    混的人。
    ------------------------------------------
    進撃!永遠の帝国の破壊虎---李恒道
    个人宣言:この世界で私に胜てる人とコードはまだ生まれていません。死ぬのが怖くなければ来てください。
    回复

    使用道具 举报

  • TA的每日心情
    慵懒
    2022-3-8 11:41
  • 签到天数: 2 天

    [LV.1]初来乍到

    10

    主题

    355

    帖子

    433

    积分

    荣誉开发者

    Rank: 10Rank: 10Rank: 10

    积分
    433

    活跃会员热心会员突出贡献三好学生猫咪币纪念章中秋纪念章国庆纪念章

    发表于 2021-12-9 23:09:20 | 显示全部楼层
    Dover 发表于 2021-12-9 22:23
    多谢两位大佬指点,我用的是EDGE浏览器,应该是谷歌内核,重新试了下还是不行,控制台截图如下: ...

    有没有可能是油猴的问题?最好使用Tampermonkey,并升级到最新版本。
    回复

    使用道具 举报

  • TA的每日心情
    慵懒
    2022-3-8 11:41
  • 签到天数: 2 天

    [LV.1]初来乍到

    10

    主题

    355

    帖子

    433

    积分

    荣誉开发者

    Rank: 10Rank: 10Rank: 10

    积分
    433

    活跃会员热心会员突出贡献三好学生猫咪币纪念章中秋纪念章国庆纪念章

    发表于 2021-12-9 23:24:43 | 显示全部楼层
    李恒道 发表于 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
    回复

    使用道具 举报

  • TA的每日心情

    2022-6-4 20:51
  • 签到天数: 32 天

    [LV.5]常住居民I

    332

    主题

    2896

    帖子

    2908

    积分

    荣誉开发者

    非物质文化遗产社会摇传承人

    Rank: 10Rank: 10Rank: 10

    积分
    2908

    猫咪币纪念章

    发表于 2021-12-9 23:59:48 | 显示全部楼层
    cxxjackie 发表于 2021-12-9 23:24
    这个我说一下调试过程吧,首先审查相关元素并刷新页面,可以看到页面加载过程中.work-card-thumbnail这部 ...

    这个我说一下调试过程吧,首先审查相关元素并刷新页面,可以看到页面加载过程中.work-card-thumbnail这部分元素被添加了一个ready的class
    这部分大佬是怎么确定的
    我调试的hi后ready加载的很快,不知道怎么确定出来的他会添加ready
    混的人。
    ------------------------------------------
    進撃!永遠の帝国の破壊虎---李恒道
    个人宣言:この世界で私に胜てる人とコードはまだ生まれていません。死ぬのが怖くなければ来てください。
    回复

    使用道具 举报

    发表回复

    本版积分规则

    快速回复 返回顶部 返回列表