如何在WordPress的17Hats iframe中用jQuery修改按钮border-radius？

当然可行！不过这里需要先注意浏览器的同源策略限制，这是能否直接用jQuery修改的关键，下面分两种情况给你具体的实现步骤：

情况1：iframe与你的WordPress站点同源（域名一致） #

如果17Hats的iframe和你的站点属于同一个域名，直接通过监听iframe加载完成，再操作内部元素即可。将以下代码添加到Header and Footer Scripts插件的footer区域：

jQuery(document).ready(function($) {
  // 替换成你页面中17Hats iframe的实际ID
  const targetIframe = document.getElementById('your-17hats-iframe-id');
  
  // 等待iframe完全加载
  targetIframe.onload = function() {
    // 获取iframe内部的文档对象
    const iframeDocument = targetIframe.contentDocument || targetIframe.contentWindow.document;
    // 找到目标按钮并修改border-radius为0
    $(iframeDocument).find('#lc_form_submit').css('border-radius', '0');
  };
});

情况2：iframe与你的站点不同源（多数第三方嵌入场景） #

如果17Hats的iframe属于外部域名，浏览器的同源策略会阻止直接通过JS修改内部元素，这时候可以试试这两种方法：

• 检查17Hats的嵌入设置/后台面板：很多SAAS工具会提供自定义样式的入口，比如允许你注入自定义CSS代码到嵌入的表单中，直接在那里添加#lc_form_submit { border-radius: 0; }即可。
• 若17Hats没有提供自定义样式入口，你可以尝试用CSS覆盖层模拟（但这种方法无法真正修改iframe内元素，只是视觉上覆盖，仅作备选）：给iframe外面套一层容器，通过绝对定位添加一个样式符合要求的按钮覆盖在原按钮位置，同时禁用原按钮的点击事件（如果可行的话）。

注意事项 #

• 一定要替换代码中的your-17hats-iframe-id为你页面中实际的iframe ID，否则无法定位到目标iframe。
• 确保代码放在footer区域，避免DOM还未加载完成就执行脚本。

内容的提问来源于stack exchange，提问作者Elad Karni