javascript 使用 jquery 在 iframe 的头部追加元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4990165/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
append element in head of an iframe using jquery
提问by Lalchand
i want to append a style sheet(css) link to the head of an iframe using jquery . i tried with the following code but not working.
我想使用 jquery 将样式表（css）链接附加到 iframe 的头部。我尝试使用以下代码但不起作用。
$('#tabsFrame').contents().find("head").append(cssLink);
采纳答案by DKSan
i am used to append data to an iframe by using this line of code
我习惯于使用这行代码将数据附加到 iframe
$('body', window.frames[target].document).append(data);
$('body', window.frames[target].document).append(data);
In your case, this line would look like this
在你的情况下，这条线看起来像这样
$('head', window.frames['tabsFrame'].document).append(cssLink);
$('head', window.frames['tabsFrame'].document).append(cssLink);
EDIT:
编辑：
Add <head></head>to the iframe and change your var cssLink to
添加<head></head>到 iframe 并将您的 var cssLink 更改为
cssLink = '<link href="cupertino_1.4/css/cupertino/jquery-ui-1.8.7.custom.css" type="text/css" rel="Stylesheet" class="ui-theme" />
cssLink = '<link href="cupertino_1.4/css/cupertino/jquery-ui-1.8.7.custom.css" type="text/css" rel="Stylesheet" class="ui-theme" />
回答by animacom
well, you can check with this:
好吧，你可以检查一下：
$('#tabsFrame').contents().find("head")[0].appendChild(cssLink);
回答by the JinX
I believe you can't manipulate the content of an iframe because of security. Having you be able to do such a thing would make cross-site-scripting too easy.
我相信由于安全性，您不能操纵 iframe 的内容。让您能够做这样的事情会使跨站点脚本编写变得太容易了。
The iframe is totally seperate from the DOM of your page.
iframe 与页面的 DOM 完全分离。
Also, java and javascript are two completely different things!
另外，java 和 javascript 是两个完全不同的东西！
Follow the Link to see the difference here
按照链接查看此处的差异
回答by mateuscb
This could be related to IE not allowing you to add elements in the DOM, check out the clever solution here
这可能与 IE 不允许您在 DOM 中添加元素有关，请在此处查看巧妙的解决方案
EDIT:
编辑：
Thanks @kris, good advice to add more info in case links break:
谢谢@kris，如果链接中断，请添加更多信息的好建议：
Here is the main code snippet from the link, in case it goes out again. (This is only needed with some IE version, for the most part, the other answer work just fine)
这是链接中的主要代码片段，以防它再次出现。（这仅在某些 IE 版本中需要，在大多数情况下，其他答案工作得很好）
var ifrm;
//attempts to retrieve the IFrame document
function addElementToFrame(newStyle) {
if (typeof ifrm == "undefined") {
ifrm = document.getElementById('previewFrame');
if (ifrm.contentWindow) {
ifrm = ifrm.contentWindow;
} else {
if (ifrm.contentDocument.document) {
ifrm = ifrm.contentDocument.document;
} else {
ifrm = ifrm.contentDocument;
}
}
}
//Now that we have the document, look for an existing style tag
var tag = ifrm.document.getElementById("tempTag");
//if you need to replace the existing tag, we first need to remove it
if (typeof tag != "undefined" || tag != null) {
$("#tempTag", ifrm.document).remove();
}
//add a new style tag
$("HEAD", ifrm.document).append("");
}
