Question

我正在尝试将样式表应用于父母的iframe内容 - 是的，我知道过去有几个问题涉及同样的想法，但我在同一个域内工作，而我我们几乎尝试了这个网站上的所有解决方案，但没有一个能够奏效。这就是我得到的：

<html>
<title>Untitled</title>
<head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<script type="text/javascript" media="screen">

    var cssLink = document.createElement("link") 
    cssLink.href = "http://domain.extension/style.css"; 
    cssLink .rel = "stylesheet"; 
    cssLink .type = "text/css"; 
    frames['#window'].document.body.appendChild(cssLink);

</script>

<style type="text/css" media="screen">

body {
    margin: 0px;
    padding: 0px;
    height: 100%;
}

iframe#window {
    padding: 0px;
    border: 0;
    width: 100%;
    height: 100%
}

</style>
</head>
<body>
    <iframe name="window" id="window" sandbox="allow-forms allow-scripts" src="http://domain.extension/example"/>
</body>
</html>

Answer 1

据我所知，由于沙盒，这是不可能的。为什么不使用AJAX？（因为它位于同一个域中。）

要实现这一点，您可以创建一个<div id="frame"></div>元素并使用.load函数将页面加载到div中，如下所示：

$('#frame').load('/somepage.html');

Answer 2

在两个脚本（框架中的一个和主窗口中的一个）上，您需要将document.domain设置为您的域。这需要在$（document）.ready（）等之前......

document.domain = "ra.gs";
var cssLink = $("<link/>",{
    href: "http://static.ra.gs/ttnnmnd/HFnmays5q/style.css",
    rel: "stylesheet",
    type: "text/css"
});

var iframeBody = $(window.document.frames["window"].window.document).contents().find("body");

iframeBody.prepend(cssLink);

将父页面中的CSS样式应用于同一域的iframe

2 个答案: