Question

为什么这个浏览器不能用于IE？

var head = jQuery("#frame1").contents().find("head");
var css = '<style type="text/css">' +
      '.container{background:blue}; ' +
      '</style>';
jQuery(head).append(css);     
});

Answer 1

我假设iframe位于同一个域中，否则它将无法在IE中运行。

你的问题是时间问题。您需要等待iframe加载，然后才能将样式应用到它。

你这样做的方式是：

$('#frame1').load(function() { // Code to execute once iframe is loaded });

一旦我们知道它已加载，我们可以应用任何样式，因此：

var head = jQuery("#frame1").contents().find("head");
var css = '<style type="text/css">' + '.container{background:blue}; ' + '</style>';
$(head).append(css);

虽然，您可以将其缩短为：

$('#frame1').load(function() {
  var css = '<style type="text/css">.container{background:blue};</style>';
  $('#frame1').contents().find("head").append(css);
});

这适用于Firefox和Chrome（在服务器堆栈上 - 由于安全限制，不在本地）。

Answer 2

<script type="text/javascript">
jQuery(function ($) {
    	$('#mainFrame').load(function() {
    		$('#mainFrame').contents().find("head").append($("<link/>", {
    	    	    rel: "stylesheet",
    	    	    href: "${ctx}/css/exp.css",
    	    	    type: "text/css"
    	    }));
    	});
    });
</script>

<iframe id="mainFrame" width="100%" height="auto"></iframe>

如何将CSS添加到iframe内容

2 个答案: