Question

我正在开发一个网站更新程序。我的想法是让某些HTML元素成为可更新类的一部分。然后，我将使用该类将每个元素更改为textarea元素。这样就可以更新了。

我将updater.html页面划分为2个区域;左侧是选择元素，但右侧显示我正在更新的网页中的一些HTML。 我希望右侧的所有html都受到特定CSS样式表（我正在更新的网页的样式表）的影响。我该怎么做？

因为样式表是外部的，所以我不想打开样式表，将其读入内存（这可能是javascript中），然后将其插入包含可更新HTML的iframe中。

<html>
<head>

</head>
<body>
   <table>
      <tr>
        <td class="updaterSection">
          <select>
            <option> home </option>
             ...
          </select>
        </td>

        <td class="updatableWebpage">
            <!-- I want all the HTML in this div to be affected by the external css stlyle sheet -->
            <iframe src="/css/specStyle.css">
              <p> uneditable stuff </p>
              <textarea> editable stuff </textarea>
            </iframe>
        </td>
       </tr>
     </table>
</body>
</html>

Answer 1

据我所知，这不是你使用iframe的方式，

<iframe>的内部将被放在src中的页面替换。

您发布的代码只是在您的网页上显示css页面。（使用代码的简单示例：http://jsfiddle.net/W5ggT/）因此，要么将iframe中的所有html放入一个新的html页面，其中包含指向其标题中特殊样式表的链接。或者你使用一些ajax来刷新它，但我不确定完全理解你想要的东西。

Answer 2

您可以使用javascript操纵iframe中的html网页的DOM。只有当它在同一个域中时才有可能。

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Iframe manipulation</title>
    <script type='text/javascript'>
        window.onload = function () {
    var iframe = document.getElementById('iframe');
    // cross browser solution for handling iframe
    var contentProp = (iframe.contentWindow)?iframe.contentWindow.document:iframe.contentDocument;

    var head = contentProp.getElementsByTagName('head')[0];
    var link = document.createElement('link');
    link.rel = "stylesheet";
    link.type = "text/css";
    link.href = "/stylesheet/css.css"; // the new stylesheet to add to iframe
    head.appendChild(link);// adds stylesheet to iframe

        });
    </script>
</head>
<body>
<iframe id='iframe' src='test2.html'></iframe>
</body>
</html>

Answer 3

在head部分（标签内）添加external.css你的css文件。

 <html>
    <head>
          <link rel="stylesheet" type="text/css" href="path to the css file">
    </head>

 <body> </body>

</html>



give a different class name to the tag that you want to style. But the style in your external.css     file.

Hope it helps.

使外部css文件仅适用于某些HTML

3 个答案: