css - 如何避免iframe嵌入代码?

标签 css iframe

我想更改我使用以下标记嵌入的文本的样式

<iframe src="URL">

我的网页的字符数量有限,使用 CSS 和 HTML 编码可以很快用完。我使用 iframe 嵌入的代码是这样的:

<style type="text/css">

body {
    color: black;
}

h1 {
    color: #FFFFFF;
}

h2 {
    color: rgb(255,255,255);
}

</style>

<h1>Hello World!</h1>

但是当我使用以下内容嵌入它时:

<iframe src="THE RAW URL of the code above" frameBorder="0">

...显示了整个代码,而不仅仅是 #FFFFFF 中的 Hello World!

我在这里做错了什么?我会只嵌入 Hello World!,但我知道父页面上的 CSS 不会更改我放入 iframe 的源代码的样式。

最佳答案

由于 iframe 用于嵌入 HTML 文档,您应该尝试使用完全有效的 HTML 作为外部文件。像这样:

<!DOCTYPE html>
<html>
<head>
  <title>iframe example</title>
</head>
<body>
  <style type="text/css">
    body {
        color: black;
    }

    h1 {
        color: #FFFFFF;
    }

    h2 {
        color: rgb(255,255,255);
    }
  </style>
  <h1>Hello World!</h1>
</body>
</html>

关于css - 如何避免iframe嵌入代码?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32688323/

相关文章:

javascript - Bootstrap 导航栏 #links 正在被 angularjs 更改(或不工作)

css - Firefox 中消失的内容

jquery - 从 Soundcloud 上的 iframe 中删除元素

google-chrome - Google Chrome/MS Edge 版本 87 会影响 iFrame 的可见性?

javascript - iframe动态src

javascript - 如何列出 iframe 请求的资源

html - div中的图片因高差被截断,如何完整显示?

html - 拉伸(stretch)背景图像以适合 iPhone 5 屏幕

css - 如何使用 CSS 过渡动画响应式布局的垂直方向?

javascript - 具有固定宽度和动态高度的 iframe