2008-11-30 74 views
1

首先,我道歉,如果这没有意义。我是XHTML,CSS和JavaScript的新手。在运行时更改嵌套页面的样式表

据我了解,在XHTML中,正确的办法有一个嵌套页面如下(而不是一个iframe):

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

如果我有一个这样的嵌套页 - 这可能改变在父页面中使用JavaScript的运行时嵌套页面使用的样式表?理想情况下,这种情况会立即发生,以至于嵌套页面在其原始样式表中永远不可见。

请假设你没有嵌套页的原始源代码的控制,但它是在同一个域(不要问)

+0

您的网页是否符合XHTML标准?用HTML做起来似乎更容易。 – nsdel 2008-11-30 20:14:08

回答

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

警告:尚未在所有浏览器中进行测试。

0

如果嵌套页是你的域之外,我担心,跨域限制会阻止你弄乱它的样式表/ html。

+0

你打败了我。 – 2008-11-30 19:34:38

0

如果嵌套页面上另一个域,JavaScript的将不允许因为SOP的存取权限,以它这是不可能的(同源策略)

0

OK,我可能是愚蠢的,但你不使用<iframe>s这样的事情?

+0

xhtml严格不支持iframe。代替使用。 – nsdel 2008-11-30 20:01:56

2

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

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

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

用myFrame引用您的iframe对象。

1

一些指针。

我前段时间对此做了一些研究,发现了一些棘手的浏览器问题,以及关于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可能有助于(从的TW代码):

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时向下发送标签。

1

如果我们位于同一个域中,请使用XMLHTTPRequest加载它,将响应文本压入带有innerHTML的隐藏DIV中,将隐藏div的BODY节点克隆到任何需要内容的位置,然后删除隐藏的div。