如何使用jQuery将CSS应用于iframe？
[英]How to apply CSS to iframe using jQuery?
问题描述
How do I access the iframe and override the elements style "td.rank" ? 
如何访问iframe并覆盖元素样式“ td.rank”？ This is what I've got so far: 到目前为止，这是我得到的：
<script>
var head = $("#iframe11").contents().find("head");
var css = '<style type="text/css">' +
'td.rank{background-color: #fc6b0a!important;}; ' +
'</style>';
$(head).append(css);
</script>
<iframe src="http://www.example.com" id="iframe11" style="margin-left: 174px; width: 401px; border: 0px solid black; height: 358px; opacity: 0.85; margin-top: 23px;"></iframe>
When I open the code using "inspect element" - I don't even see the CSS code part in the <head> tag of the iframe. 当我使用“检查元素”打开代码时-我什至在iframe的<head>标记中都看不到CSS代码部分。
2 个解决方案
解决方案1
0 2015-08-19 10:51:20
- Ensure that the frame document is on the same origin as the framing document so you don't have a security policy violation. 确保框架文档与框架文档具有相同的来源，因此您不会违反安全策略 。
- Move the script so it appears after the frame so that the element exists before you try to access it 移动脚本，使其出现在框架之后，以便在尝试访问脚本之前该元素存在
- Move the code into a function and use that as a
loadhandler for the frame so that the DOM you want to manipulate exists before you try to manipulate it将代码移动到函数中，并将其用作框架的load处理程序，以便在尝试操纵DOM之前就存在要操纵的DOM。
解决方案2
0 2016-06-01 10:10:49
You if would like add css style inside iframe using jQuery then just follow below steps... 您是否想使用jQuery在iframe中添加CSS样式，然后按照以下步骤操作...
1. First create 'index.html' file and add below code in it 1.首先创建“ index.html”文件，并在其中添加以下代码
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.6.3.min.js"></script>
<script>
$(document).ready(function() {
$('#iframe').load(function() {
$("#iframe").contents().find("head").append("<style>.text_color{color:red;}@page{margin:0;}</style>");
});
});
</script>
</head>
<body>
<iframe src="iframe.html" id="iframe" name="iframe"></iframe>
</body>
</html>
2. Next create another file called 'iframe.html' and add below code to it 2.接下来，创建另一个名为“ iframe.html”的文件，并向其中添加以下代码
<!DOCTYPE html>
<html>
<body>
<div id="text"><span class="text_color">Content inside iframe goes here<span></div>
</body>
</html>
3. Next run 'index.html' file and now see 'Content inside iframe goes here' text color will changed to red color 3.下一步运行“ index.html”文件，现在看到“ iframe中的内容会移至此处”，文本颜色将变为红色
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.