相关疑难解决方法(0)

是否可以仅使用CSS更改驻留在页面上iframe内的div的样式？

如何控制一个体内元素的背景图像和颜色iframe？注意,嵌入的body元素有一个类,而且iframe是一个页面,它是我站点的一部分.

我需要这个的原因是我的网站有一个黑色背景分配给身体,然后白色背景分配给包含文本的div.WYSIWYG编辑器iframe在编辑时使用嵌入内容,但它不包含div,因此文本很难阅读.

iframe编辑器中的when 的主体有一个在其他任何地方都没有使用的类,所以我假设这个被放在那里,所以这样的问题可以解决.但是,当我应用样式时,class.body它们不会覆盖应用于body的样式.奇怪的是,样式确实出现在Firebug中,所以我不知道发生了什么!

谢谢

更新 - 我已经尝试了@ mikeq的解决方案,即将类型添加到正文类的类中.这在添加到主页的样式表时不起作用,但在使用Firebug添加时它确实有效.我假设这是因为Firebug应用于页面上的所有元素,而CSS不应用于iframe中.这是否意味着在使用JavaScript加载窗口后添加css会起作用？

在Like-Button 的设置对话框中,布局只有两个选项:

死链接 - 备选1 死链接 - 备选2

不幸的是,我的雇主网站的数字远不及22'000,所以权力决定我们不应该显示"喜欢"的数量,直到这个数字对我们有利.据我所知,我无法通过Javascript或CSS访问按钮的布局(它位于facebook提供的iframe中).有没有其他方法可以隐藏计数？

可能重复:
如何将CSS应用于iFrame？

现在我通过jquery加载iframe:

 $(window).load(function(){
  $('iframe').load(function() {
      $('iframe').show()
      $('#loading').hide();

    });
    $('#loading').show();
    $('iframe').attr( "src", "http://www.url.com/");

  });

我有一个自定义样式表,我想应用于该页面.iframe中的页面不在同一个域中,这就是为什么它很棘手.我找到了允许您添加单个标签的解决方案,但不是整个样式表.

编辑:有问题的页面是通过file://Mobile Safari 加载的,因此跨域策略不适用.

我经常看到使用包含外部网站的iframe的网站,以及包含用户JavaScript功能的顶部框架.

例如用户分析软件,Digg吧等......

有关类似试验的任何提示吗？=)真是太棒了

我无法将CSS生成的内容用于iframe元素:

iframe::after {content: 'example';}
iframe::before {content: 'example';}

有没有人有一个真正有效的解决方案？提前致谢.

TL;博士:

YouTube嵌入式视频<iframe>标签具有触摸事件监听器.活动的触摸事件监听器会导致滚动性能问题 - AKA jank.我通常通过在CSS中使用 来修复与活动触摸事件相关的jank问题.这不适用于Youtube嵌入式视频元素.touch-action: initial <iframe>

介绍:

Kayce Basques - Google技术人员 - 写道:

当您滚动页面并且有一个延迟使页面感觉不固定在您的手指上时,这称为滚动扫描.很多时候,当你遇到滚动冲击时,罪魁祸首是一个触摸事件监听器.

触摸事件侦听器通常用于跟踪用户交互和创建自定义滚动体验,例如在与嵌入式Google地图交互时完全取消滚动.

目前,浏览器无法知道触摸事件监听器是否要取消滚动,因此它们总是在滚动页面之前等待监听器完成.

我找到了一种方法来使用触摸操作来回避这个问题

触摸动作CSS属性指定用户是否可以通过触摸屏操纵给定区域以及以何种方式操作(例如,通过平移或缩放浏览器内置的功能).

如果我用touch-action: initial这个问题就消失了.

如果你想看看是什么导致滚动抖动和什么不滚动,请检查下面的屏幕截图

红色按钮会导致凹陷,而绿色按钮则不会.两者之间的唯一区别是红色按钮被设置为touch-action: manipulation使红色按钮主动"监听"并处理输入,然后滚动才能继续

问题

我嵌入了来自Youtube的视频.iframe包含活动的触摸事件侦听器.我上面提到的方法不起作用.我无权访问Youtube代码来编辑侦听器并将其设置为被动.

我试图缩小这个问题的范围.我发现该类的元素具有.html5-video-player以下CSS

.html5-video-player {
    touch-action: manipulation;
}

根据文档, manipulation可以

[...]启用平移和捏缩放手势,但禁用其他非标准手势,例如双击缩放.禁用双击以进行缩放消除了浏览器在用户点击屏幕时延迟生成点击事件的需要.这是"pan-x pan-y pinch-zoom"的别名(为了兼容性,它本身仍然有效).

和

[...]也经常用于完全禁用由于支持双击缩放手势而导致的点击事件延迟.

所有这些都是我不需要的东西.

Logic说我需要做的就是将它添加到我的CSS中

.html5-video-player {
    touch-action: initial;
}

但这不起作用,也不是这样:

.html5-video-player {
    touch-action: initial !important;
}

或这个:

.html5-video-player …

我正在使用以下代码将Twitter Feed引入我的网站,该代码在https://publish.twitter.com/上有所描述

<a class="twitter-timeline" href="https://twitter.com/ACCOUNT-HERE" data-tweet-limit="3">Tweets by</a> 
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

Feed正确显示.然而,它使用通过Twitter提供的CSS.

当我使用Chrome开发工具检查它时,我可以在推文周围看到以下类:

<p class="timeline-Tweet-text" lang="en" dir="ltr">

所以我认为这将是一个简单的例子,在CSS中将其作为目标,例如

.timeline-Tweet-text {
}

但是,这不适用于推文的任何样式.为什么不？

我也在这里提到了Twitters的指导https://dev.twitter.com/web/overview/css,但这也行不通.

我想要这样做的唯一原因是小部件中使用的字体body与我网站上其他文本使用的字体相匹配.

我正在尝试自定义新的Twitter小部件,但是在CSS上遇到了一些问题,似乎无法覆盖这个新的小部件.我试过寻找解决方案,但找不到任何匹配.

这是我的页面右侧导航中的小部件和.timeline类的调整后的CSS:

.timeline {
margin-bottom:0;
border:0 !important;
border-radius:0 !important;
-webkit-border-radius:0;
-moz-border-radius:0;
}

HTML:

<div class="bg">
<h3 class="twitter">Twitter News</h3>
<div id="twitter">
<a class="twitter-timeline" href="https://twitter.com/" data-widget-id="268336500536647680">Tweets by </a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</div></div>

我已经开始使用!important声明并尝试使用主#twitter id来覆盖,但都不起作用.

任何想法都非常感激.

**我显然需要以某种方式编辑iframe,但不确定如何 - 如果有人更清楚地知道如何使用我的代码(而不是教程)来做到这一点会很棒.我还需要更改iframe宽度..

在 React 应用程序中，如何将 CSS 样式应用于 iframe 加载的 src 内容？

我有一个加载外部内容的应用程序，但样式确实过时了，我想覆盖它。

示例波纹管：（请注意，我用一些虚拟数据替换了 , 的src内容<iframe/>，但是，问题仍然相同。

import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";

class Frame extends React.Component {
  componentDidMount() {
    document
      .querySelector("iframe")
      .contentWindow.document.querySelector("h1#firstHeading").style.color =
      "red";
  }
  render() {
    return (
      <iframe
        title="How Can I overwrite the styles from the src content?"
        src="https://en.wikipedia.org/wiki/Herbie_Hancock"
        width="90%"
        height="500px"
        scrolling="no"
      />
    );
  }
}


function App() {
  return (
    <div className="App">
      <Frame />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App …