JQuery - 将样式表应用于 Iframe（相同域）答案

【问题标题】：JQuery - Apply Stylesheet to Iframe (same domain)JQuery - 将样式表应用于 Iframe（相同域）
【发布时间】：2013-06-12 15:54:32
【问题描述】：

我在单个页面上有一个 iframe，我正在将 html（存储在 mysql 中）加载到 iframe 中。我想为iframe 应用一个单独的样式表。

这是我目前正在做的事情：

<?php 
  $storedhtml = '<strong>Testing</strong><br><br>lots more html text......';
?>

<iframe id="lovely_pages" src="about:blank" style="width:99%;height:700px;" frameBorder="0"></iframe>

<script language="javascript" type="text/javascript">
$(document).ready(function(){

  $('#lovely_pages').contents().find('html').html('<?php echo $storedhtml; ?>');

});
</script>

这是我要应用于iframe 的样式表：

<link href="/styles/iframe_only.css" rel="stylesheet" type="text/css">

我尝试使用$storedhtml 变量将样式表放入html()，但这并没有改变任何东西。谁能看到我做错了什么？

【问题讨论】：

看起来你的 iFrame 中没有头部、身体或其他任何东西，因为你只是将一个简单的字符串插入到 documentElement 中，覆盖了其他所有内容。浏览器可能会尝试修复它，但样式应该在头部，因此您必须插入有效的 HTML 或访问浏览器创建的头部元素以尝试修复您的愚蠢错误。
我只是在玩弄它，因为我注意到 iframe 里面除了简单的字符串之外没有太多内容。

标签： jquery iframe stylesheet

【解决方案1】：

以下修改修复了结果：

<?php 
  $storedhtml = '<strong>Testing</strong><br><br>lots more html text......';
?>

<iframe id="lovely_pages" src="about:blank" style="width:99%;height:700px;" frameBorder="0"></iframe>

<script language="javascript" type="text/javascript">
$(document).ready(function(){

  $('#lovely_pages').contents().find('head').html('<link href="/styles/iframe_only.css" rel="stylesheet" type="text/css">');
  $('#lovely_pages').contents().find('body').html('<?php echo $storedhtml; ?>');

});
</script>

【讨论】：