包含一个html页面,并在页面呈现后丢弃css样式

时间:2013-05-30 15:02:51

标签: php html css iframe include

如何包含文件,但在包含和呈现文件后“忘记”有关文件的内容;包含它,可以这么说。

在当天,我想我会使用一个框架,但现在时间已经改变了。我认为iframe仍然是公平的游戏....但还有其他方法吗?

P.S。 我无法编辑包含的文件:)。

的index.php

<?php
echo '<p>This is some left-aligned text</p>';
include 'include.html';
echo '<p>This is some more left-aligned text</p>';
?>

include.html

<html>
<head>
<style>
body{
    text-align:center;
}
</style>
</head>
<body>
<p>This is some centered text</p>
</body>
</html>

输出

                       This is some left-aligned text

                       This is some centered text

                       This is some more left-aligned text

所需输出

This is some left-aligned text

                       This is some centered text

This is some more left-aligned text

'终极'目标 为了提供更多信息,我有一个epub文件。我加载container.xml来确定根文件,它是一个.opf文件,它告诉我spint,它包含很多.html文件......

然后我将所有这些html文件都包含在页面中,以便可以在一个连续的流程中读取epub。

epub文件无法编辑?除非我能够在不修改epub文件的情况下执行此操作。

3 个答案:

答案 0 :(得分:2)

您可以尝试使用作用域css,但这是一项实验性功能。 所以在 index.php 的头部你应该包含这个jquery插件:https://github.com/thingsinjars/jQuery-Scoped-CSS-plugin

然后,要实现您想要实现的目标,您必须将 include.html 文件更改为以下内容:

<html>
<head>
</head>
<body>
<style scoped>
body{
    text-align:center;
}
</style>
<p>This is some centered text</p>
</body>
</html>

我认为这应该可以解决这个问题并让你加载你想要包含的'每个'包含页面而不让它的风格影响文档的其余部分..但是你正在使用的JQuery插件的限制(它有一些问题)。 Chrome和Firefox目前在本地实现此特定功能,不需要此插件。

答案 1 :(得分:1)

只需在index.php上创建css类

<?php
echo '<p class=\'left\'>This is some left-aligned text</p>';
include 'include.html';
echo '<p class=\'left\'>This is some more left-aligned text</p>';
?>

在样式标签中添加index.php:

<style type="text/css">
.left{text-align:left;}
</style>

“包含”的html文件无需更改。

现在应该可以正常使用。我会说iframe非常好,取决于你在做什么。您当前的演示页面没有多大意义,但我认为这只是用于测试。所以上面应该适合你。

答案 2 :(得分:1)

将文件作为字符串加载并仅加载html文件的正文,因为您不能在同一文件中包含2个HTML标记。

<?php
echo '<p class=\'left\'>This is some left-aligned text</p>';
$html = file_get_contents('include.html');
preg_match('/\<body\>(.*?)\<\/body\>/is', $html, $matches);
echo $matches[1];
echo '<p class=\'left\'>This is some more left-aligned text</p>';
?>