更改Iframe中的文本颜色
答
<html>
<head>
<script type="text/javascript">
function InitEditable()
{
var editor = document.getElementById ("editor");
var editorDoc = editor.contentWindow.document;
var editorBody = editorDoc.body;
// turn off spellcheck
if (editorBody.contentEditable === undefined) { // Firefox earlier than version 3
if (editorDoc.designMode !== undefined) {
// turn on designMode
editorDoc.designMode = "on";
}
}
else {
// allow contentEditable
editorBody.contentEditable = true;
}
}
function ToggleBold()
{
editorDoc.execCommand ('bold', false, null);
}
function ToggleItalic()
{
editorDoc.execCommand ('italic', false, null);
}
function SetRed() {
//sets foreground color
editorDoc.execCommand ('foreColor', false, "#ff0000");
}
function Delete() {
editorDoc.execCommand ('delete', false, null);
}
</script>
</head>
<body onload="InitEditable();">
First, write and select some text in the editor.
<br />
<iframe id="editor" src="F:\EXAMPLE\JAVA\FILE\SURESHMNG.txt"></iframe>
<input type="textarea" id="ta"></textarea>
<br /><br />
You can use the following buttons to change the appearance of the selected text:
<br /><br />
<button onclick="ToggleBold();">Bold</button>
<button onclick="ToggleItalic();">Italic</button>
<button onclick="SetRed();">Set to red</button>
<button onclick="Delete();">Delete</button>
</body>
</html>
答
简短的回答是:不,如果您无法控制源页面,则无法控制样式。
这不可能只使用CSS。您基本上需要对iframe内容进行控制,以便对其进行设计。有些方法使用JavaScript或您选择的Web语言动态插入一些需要的样式,但您需要直接控制iframe内容。
假设页面与您的博客位于同一个服务器上,您可以使用jQuery控制样式,例如动态设置页面样式。然而,javascript(以及jQuery)受制于same origin policy,如果iframe的来源与您所显示的域名不同,则无法操作iframe的内容。
如果你的源页面住外部服务器上,另一种可能是创建自己的PHP“小工具”,它可以,或者通过使用jQuery.load加载外部网页,并使用file_get_contents然后加载作为一个iframe,在这只要这个脚本/小部件与您的博客存在于同一个域中,您就可以根据您的内容设置和控制该页面的内容。