相关疑难解决方法(0)

我有一个简单的页面,有一些iframe部分(显示RSS链接).如何将主页面中的相同CSS格式应用于iframe中显示的页面？

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

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

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

谢谢

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

我如何在以后删除手表并分享来自youtube iframe嵌入播放器的按钮.使用以下嵌入代码嵌入视频剪辑.

<iframe width="854" height="480" src="https://www.youtube.com/embed/cPVgwz5aN1o" frameborder="0" allowfullscreen></iframe>

使用showinfo = 0将删除包含视频标题的完整标题.

是否可以仅从标题中删除"稍后观看"和"共享"按钮？

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 …

我有一个iframe已创建的嵌入式发布谷歌文档.的iframe自动应用一个大的填充到其body导致文本是一个非常窄和难看柱.我必须改变这一点.

我试图创建一个自定义指令:

app.directive('iframeWithStyle', [function(){
return {
    restrict: 'A',
    link: function(scope, element, attrs){
        element.on('load', function(){
               var iframe = element[0];
               var grabbedElement = iframe.querySelector("body");
               // -> grabbedElement is null here
        });
    }
}}]);

适用于:

<iframe iframe-with-style
        src="https://docs.google.com/document/d/somethingABC123/pub?embedded=true">
</iframe>

但正如预期的那样,iframe.querySelector返回null和iframe.contentWindow.document结果

未捕获的DOMException:阻止具有原始" http:// localhost:8100 "的帧访问跨源帧.

我已经看过一个解决方法,但我觉得它有点过分(例如:与消息安全交叉通信).

我尝试用一​​些css应用于我可以达到的范围来对抗填充.例如:

iframe {
  padding: 0px !important;
  margin-left: -50px;
  margin-right: 50px;
}

CSS应用到body的iframe似乎被简单地忽略.

曾几何时,有一些便利属性,例如marginwidth.也试过了.我也想知道谷歌是否不提供一些"糖",但谷歌搜索并没有帮助.

注意:它确实不一定是iframe,但我需要在应用程序中以可读的方式显示格式化的gdoc; …

谷歌表单的内容默认为 640px 宽 - 这是在“.freebirdFormviewerViewCenteredContent”类中设置的，我需要使其更宽。我\xc2\xb4m 使用 iframe 将其嵌入到网站上，我可以\xc2\xb4t 找到如何添加“宽度”CSS 使其工作的解决方案。可能吗？

我正在尝试设置snapwidget instagram feed的样式,我想让边框变白.这不是小部件的设置,所以我尝试添加css.似乎我的css没有被检测到,因为内容是在iframe中.有没有办法强制我的CSS在iframe内容？

我有一个网站example.com和另一个网站example1.com.我想将example1.com显示为example.com网站中的iframe内容.

例如:

在example.com中包含此内容 <iframe src='http://example1.com'>

并在example.com中的body末尾添加jquery脚本.这不适用于跨域.所以请对此进行任何调整

$(document).ready(function() {
  $("#Frame").load(function(){
    var timestamp =  +(new Date());
    $("#Frame").contents().find("head").append("<link href='http://xxxxxx.com/style.css?&apos;+ timestamp +&apos;' rel='stylesheet' type='text/css'/>");
  });
});

所以当在example.com中加载example1.com iframe时,xxxxxx.com/style.css必须包含在example1.com iframe的标题中以更改其css内容

注意:我无法控制example1.com,这是iframe内容

我正在使用的CMS不允许我访问服务器端.因此,只能在客户端进行操作.因此使用代理的解决方案无济于事.

我知道跨多米尼亚政策.但即使是一些人也会操纵.提前致谢

我在我的网站上使用了一些免费的 instagram 提要 iframe 代码，并想在移动设备上编辑图片的大小……目前在桌面上，提要是 2 行 5 张图片。在移动设备上，我想将图片的大小增加到 50% 的宽度，这样它的 5 行 2 张图片。我打开控制台，看起来它的 li.in-tile 需要宽度：50%；但是，当您查看该元素的 css 时，它是 .lightwidget.in-grid.in-grid-5 li，宽度为 20%，但我需要它为 50%。

如果有帮助，我正在使用weebly来构建网站，是的，我正在插入

.lightwidget.in-grid.in-grid-5 li{
width:50% !important;
}

移动“最大宽度 480 像素”的媒体查询。

这是我用来调用提要的嵌入代码。

<!-- LightWidget WIDGET --><script src="//lightwidget.com/widgets/lightwidget.js"></script><iframe src="//lightwidget.com/widgets/3c1052429c9753bfa460e4a0636864a3.html" id="lightwidget_3c1052429c" name="lightwidget_3c1052429c"  scrolling="no" allowtransparency="true" class="lightwidget-widget" style="width: 100%; border: 0; overflow: hidden;"></iframe>

显然，当网页呈现 iframe 时，它​​正在调用托管在某处的 html 文档……我需要知道是否有办法更改该 css。

希望我解释得很好。

谢谢。

如何使用父页css设置iframed页面的内容？我没有iframed页面的访问权限？

我做了这个例子 - http://jsbin.com/uxobe

如何设置不同的HTML格式我在iframe中使用的页面？

有没有办法通过css或js + css这样的风格？

http://siteurl { background:red}

我尝试将外部页面加载到 iframe 并
在此处更改该页面的背景颜色是代码（它不起作用 - 它更改父页面的颜色而不是 iframe 页面）：

<style type="text/css">
iframe {
    background-color: #F00;
}
</style>

<iframe src="http://www.filehippo.com/" height="100%" width="100%">
</iframe>


<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $('body').css('background-color', '#F00');
});
</script>

如何使用 CSS 将图像定位到 iframe 内？

这不起作用

iframe img {
    height: auto;
    width: 100%;
}