Question

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

我在XHTML中收集，有一个嵌套页面的正确方法如下（而不是iframe）：

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

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

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

Answer 1

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

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

Answer 2

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

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

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

使用myFrame引用iframe对象。

Answer 3

一些指示。

我刚才做了一些研究，发现了一些棘手的浏览器问题，以及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时向下发送标记。

Answer 4

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

Answer 5

如果嵌套页面位于域外，跨域限制将阻止您摆弄样式表/ html，我担心。

Answer 6

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

Answer 7

好吧，我可能很愚蠢，但是你不是用<iframe>s这样的东西吗？

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

7 个答案: