在运行时更改嵌套页面的样式表答案

【问题标题】：Changing the stylesheet of a nested page at runtime在运行时更改嵌套页面的样式表
【发布时间】：2010-09-24 15:50:09
【问题描述】：

首先，如果这没有意义，我深表歉意。我是 XHTML、CSS 和 JavaScript 的新手。

我认为在 XHTML 中，嵌套页面的正确方法如下（而不是 iframe）：

<object name="nestedPage" data="http://abc.com/page.html" type="text/html" 
width="500" height="400" />

如果我有一个这样的嵌套页面 - 是否可以使用父页面中的 JavaScript 在运行时更改嵌套页面使用的样式表？理想情况下，这会立即发生，这样嵌套页面就不会以其原始样式表可见。

请假设您无法控制嵌套页面的原始源代码，但它在同一个域中（不要问）

【问题讨论】：

您的页面是否绝对需要与 XHTML 兼容？使用 HTML 似乎要容易得多。

标签： javascript css xhtml

【解决方案1】：

如果嵌套页面在您的域之外，恐怕跨域限制会阻止您摆弄它的样式表/html。

【讨论】：

【解决方案2】：

如果嵌套页面在另一个域上是不可能的，由于 SOP（同源策略），javascript 将不允许访问它

【讨论】：

【解决方案3】：

好吧，我可能很愚蠢，但你不会用<iframe>s 来做类似的事情吗？

【讨论】：

xhtml strict 不支持 iframe。

【解决方案4】：

我建议为此使用 iframe，我不知道是否也支持这样做的对象方式。

无论如何，在加载来自同一域的页面后，您可以通过 javascript 访问其所有属性。例如，在 jQuery 中，您会使用来更改 css 文件。

$("link [rel=stylesheet]", myFrame).attr('href', <new-url>);

使用 myFrame 引用您的 iframe 对象。

【讨论】：

【解决方案5】：

d = document.getElementsByTagName('object').namedItem('nestedPage').getContentDocument();
d.styleSheets[d.styleSheets.length].href = 'whereever';

警告：尚未在所有浏览器中测试。

【讨论】：

【解决方案6】：

几个指针。

我不久前对此进行了一些研究，发现了一些棘手的浏览器问题以及关于 Quirksmode 和 IIRC Dojo 邮件列表的一些好的解决方案和建议。它产生了以下库函数来应用我在主要浏览器中测试过的 CSS：

function applyCSS(css) {
  // http://www.quirksmode.org/bugreports/archives/2006/01/IE_wont_allow_documentcreateElementstyle.html
  if (BrowserDetect.browser=="Safari" || BrowserDetect.browser=="Opera") { /* good for FF too */
    var styleNode = document.createElement("style");
    styleNode.setAttribute("type", "text/css");
    styleNode.appendChild(document.createTextNode(css)); 
    head.appendChild(styleNode); 
  } else {
    var div = document.createElement("div");
    div.innerHTML = "<p>x</p><style>"+css+"</style>";
    document.body.appendChild(div.childNodes[1]);
  }
}

如果您最终在 iframe 中执行此操作，this trick 可能会有所帮助（来自 TiddlyWiki 代码）：

var doc = iframe.document;
    if(iframe.contentDocument)
        doc = iframe.contentDocument; // For NS6
    else if(iframe.contentWindow)
        doc = iframe.contentWindow.document; // For IE5.5 and IE6
    // Put the content in the iframe
    doc.open();
    doc.writeln(content);
    doc.close();

上面的代码生成了一个包含一些内容的新 iframe。如果你只输出一次 iframe 并且你已经知道 CSS，你可以在输出 iframe 时发送一个标签。

【讨论】：

【解决方案7】：

如果我们在同一个域，使用 XMLHTTPRequest 加载它，将响应文本猛击到带有 innerHTML 的隐藏 DIV 中，将隐藏 div 的 BODY 节点克隆到您想要内容的任何位置，然后删除隐藏的分区。

【讨论】：