将样式表替换为其他网页自己的样式表

Question

我正在建立网站www.verbum.xtrweb.com/verbum.php

我使用php中的请求函数从网站获取西班牙语单词的定义：www.rae.es。我得到的输出是在，但不幸的是，我不能改变它输出的元素的风格。例如，如果你查找单词“hola”，你将获得“hola”的含义，但是使用www.rae.es的样式表。我想要的是将此输出应用于我自己的样式（颜色，字体，字体大小等）

我现在有一个叫做$ important的东西！但根据我之前测试的方式，它没有用。

我急切地想起了stackoverflow社区的神奇帮助。

Answer 1

您要更改的内容位于iframe中。我建议您只将样式表注入iframe direct，但不幸的是，您想要的内容位于不同的域中。由于跨域安全策略，您将无法直接修改iframe的内容。

有两种方法可以解决这个问题。您可以使用PHP应用程序来获取所需的内容，然后您可以过滤它并以您希望的任何方式进行更改。这将取代iframe，而只是在页面上显示您需要的内容。另一种选择是使用更简单的PHP应用程序来获取内容，但根本不修改它。然后你将你的iframe指向这个PHP应用程序，它将以与现在相同的方式显示，但它将来自同一个域。然后，您可以使用Javascript注入样式表，并使其以您想要的任何方式显示。

“重要！”如果你使用我提到的第二种方法，可能需要CSS覆盖，但这不是问题的根本原因。如果您想了解更多有关如何使用重要内容的信息，请参阅this article。

下面我已经实现了我描述的第一种方法的示例。这将下载请求的页面，然后注入一组自定义样式。

<?php
$url = 'http://lema.rae.es/drae/srv/search?id=IwxflJmT9DXX2DMkYs8Z';

$css = <<<EOT
<style type="text/css">
body
{
    background: #eeeeee;
}
.a
{
    color: green;
}
.f
{
    font-size: 200%;
}
.o
{
    font-size: 80%;
}
img
{
    opacity: .5;
}
img:hover
{
    opacity: 1;
}
</style>
EOT;

$data = file_get_contents($url);
$data = str_replace('</head>', $css.'</head>', $data);
echo $data;

?>