html - 尝试对与我的网页位于同一域中的 iFrame 进行 CSS 编辑？

Question

所以通过一些谷歌搜索和 SO Q&A 搜索，我发现如果您无权访问 iFrame 的样式表，只要它与您的网页位于同一域中，您仍然可以进行编辑将其嵌入到。

我正在尝试使这个非常古老的电子邮件注册表单的外观现代化，

我在 iframe 周围包裹了一个 div，并设法做了一些小的调整，比如将它向左移动一点点之类的。在样式方面没有什么真正令人印象深刻。

HTML:

 <div class="editFrame">
     <iframe scrolling="no" marginheight="0" src="http://convio.cancer.ca/site/Survey?ACTION_REQUIRED=URI_ACTION_USER_REQUESTS&amp;SURVEY_ID=34442&amp;s_locale=en_CA" marginwidth="0" width="380" height="220" frameborder="0">
      </iframe>
  </div>

这是 iframe 的 CSS，我通过使用 Chrome 对其进行检查而成功提取

CSS:

input:not([type="image" i]), textarea {
    box-sizing: border-box;
}

input:not([type]), input[type="email" i], input[type="number" i], input[type="password" i], input[type="tel" i], input[type="url" i], input[type="text" i] {
    padding: 1px 0px;
}

input {
    -webkit-appearance: textfield;
    background-color: white;
    -webkit-rtl-ordering: logical;
    -webkit-user-select: text;
    cursor: auto;
    padding: 1px;
    border-width: 2px;
    border-style: inset;
    border-color: initial;
    border-image: initial;
}

input, textarea, keygen, select, button {
    text-rendering: auto;
    color: initial;
    letter-spacing: normal;
    word-spacing: normal;
    text-transform: none;
    text-indent: 0px;
    text-shadow: none;
    display: inline-block;
    text-align: start;
    margin: 0em 0em 0em 0em;
    font: 13.3333px Arial;
}

input, textarea, keygen, select, button, meter, progress {
    -webkit-writing-mode: horizontal-tb;
}

这是我尝试添加的 CSS:

.editFrame iframe input[type="text"] {
  padding: 10px !important;
  border: solid 1px gainsboro !important;
  -webkit-transition: box-shadow 0.3s, border 0.3s !important;
  -moz-transition: box-shadow 0.3s, border 0.3s !important;
  -o-transition: box-shadow 0.3s, border 0.3s !important;
  transition: box-shadow 0.3s, border 0.3s !important;
}
.editFrame iframe input[type="text"]:focus, .editFrame input[type="text"].focus {
  border: solid 1px #707070 !important;
  -webkit-box-shadow: 0 0 5px 1px #969696 !important;
  -moz-box-shadow: 0 0 5px 1px #969696 !important;
  box-shadow: 0 0 5px 1px #969696 !important;
}

我的目的是让它看起来像这个页面上的“Glow”输入字段:Various CSS Input Text Styles , Tutorial ，并编辑名称、电子邮件等标签，使其看起来更漂亮并更改字体。

但是这些似乎都不起作用。

我所做的一切似乎都奏效了(在我的样式表中注释掉，因为我认为它可能有冲突):

 .editFrame {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 35px;
    height: 0;
    overflow: hidden;
 }

 .editFrame iframe {
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;

}

有人知道我正在做的事情是否可行吗？

预先感谢您的帮助!

Answer 1

您可以使用 jQuery 为 iframe 添加样式:

$('.editFrame iframe').ready( function() {
  $('.editFrame iframe').contents().find("head").append($("<style type='text/css'>position: absolute; top:0; left: 0; width: 100%; height: 100%; </style>"));
});