博主iframe评论表单是否被限制自定义

Is blogger iframe comment form restricted from customization?

本文关键字：自定义 是否 iframe 评论 表单 博主      更新时间：2023-09-26

我是一个扰乱代码的初学者。。。我试图自定义博主评论表单。我用chrome跟踪元素，发现Iframesrc到一个只有博主评论表格的html文件。从评论表单源html，我发现了一个外部css链接，其中包含我需要自定义的所有css。

但是，我在模板中发现了空的src。如果我像上面提到的那样编辑主机和HTML文件，（使用编辑过的css链接）我能自定义iframe-css吗？还是被博主限制（用代币？）？

或者，有没有办法用javascript/jquery覆盖css？

（无法发布到源的链接，链接很大，stackoverflow不允许我）

您无法访问iframe的样式。您必须将其视为页面中的另一个浏览器窗口。您页面上的Css不会影响它，并且您不能使用javascript访问它。这就是iframes的缺点。。。

如果我理解了，这是可能的。编辑：但不能跨域工作。出于安全考虑。

首先，你应该阅读这个链接http://benvinegar.github.com/seamless-talk/

然后，如何将CSS应用于iframe？

我看到一些Blogger模板有一个改进的iframe评论表单…所以我认为这是可能的。。。事实上，这是Blogger的一个新的（我的意思是刷新，因为它可能已经存在很长时间了）评论形式的皮肤。

也许它可以帮助一些人，所以诀窍是：

1） 请确保您当前使用的是Blogger Template版本2，否则，请在模板顶部使用此代码行进行更新（请小心，因为这会给widget和section类添加一些css，这可能会打乱我们的设计）：

<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>

2） 在Blogger HTML编辑器中的</b:skin>标记之前添加这些代码行

/* Variable definitions ====================
<Group description="New Comment Required – Dont edit">
  <Variable name="body.background" description="Body Background" type="background" color="#000" default="#000 none repeat scroll top left" value="#000 none repeat scroll top left" />
  <Variable name="body.font" description="Font" type="font" default="normal normal 14px Arial, sans-serif" value="normal normal 14px Arial" />
  <Variable name="body.text.color" description="Text Color" type="color" default="#222" value="#222222" />
  <Variable name="body.text.font" description="2" type="font" default="$(body.font)" value="normal normal 14px Arial, sans serif" />
  <Variable name="posts.background.color" description="6" type="color" default="#fff" value="#ffffff" />
  <Variable name="body.link.color" description="7" type="color" default="#ffa015" value="#ffa015" />
  <Variable name="body.link.visited.color" description="8" type="color" default="$(body.link.color)" value="#ffa015" />
  <Variable name="body.link.hover.color" description="9" type="color" default="$(body.link.color)" value="#ffa015" />
  <Variable name="blog.title.font" description="10" type="font" default="$(robotoBold45)" value="$(robotoBold45)" />
  <Variable name="blog.title.color" description="11" type="color" default="#fff" value="#ffffff" />
  <Variable name="header.icons.color" description="12" type="color" default="#fff" value="#ffffff" />
  <Variable name="tabs.font" description="13" type="font" family="$(body.font.family)" size="$(body.font.size)" default="700 normal $(size) $(family)" value="700 normal $(size) $(family)" />
  <Variable name="tabs.color" description="14" type="color" default="#ccc" value="#cccccc" />
  <Variable name="tabs.selected.color" description="15" type="color" default="#fff" value="#ffffff" />
  <Variable name="tabs.overflow.background.color" description="16" type="color" default="$(posts.background.color)" value="#ffffff" />
  <Variable name="tabs.overflow.color" description="17" type="color" default="$(posts.text.color)" value="#222222" />
  <Variable name="tabs.overflow.selected.color" description="18" type="color" default="$(posts.title.color)" value="#212121" />
  <Variable name="posts.title.color" description="19" type="color" default="#212121" value="#212121" />
  <Variable name="posts.title.font" description="20" type="font" default="$(robotoBold22)" value="$(robotoBold22)" />
  <Variable name="posts.text.font" description="21" type="font" default="$(body.text.font)" value="normal normal 14px &#39;roboto&#39;, sans-serif" />
  <Variable name="posts.text.color" description="22" type="color" default="$(body.text.color)" value="#222222" />
  <Variable name="posts.icons.color" description="23" type="color" default="#ffa015" value="#ffa015" />
  <Variable name="labels.background.color" description="24" type="color" default="$(sidebar.backgroundColorTopHD)" value="$(sidebar.backgroundColorTopHD)" />
</Group>
*/

注意：你可以很容易地自定义颜色&字体在那里（原来的博客强调颜色是#ffa015）

3） 全部替换data:post.commentFormIframeSrc具有data:post.commentFormIframeSrc + &quot;&amp;skin=contempo&quot; + data:variantParam

塔达姆。。。不再需要浪费时间尝试一些iframe自定义。

相关文章：