0

我正在尝试将样式表应用于来自父级的 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>
4

2 回答 2

1

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

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

$('#frame').load('/somepage.html');
于 2012-09-26T16:32:22.630 回答
1

在这两个脚本（框架中的一个和主窗口中的一个）上，您需要将 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);
于 2012-09-26T16:52:56.497 回答