如何隐藏iframe内指定元素？WordPress自定义CSS设置无效求助

核心原因是浏览器同源策略限制：你的WordPress主题CSS属于父页面，无法穿透到跨域的iframe内部，而开发者工具是直接在iframe的上下文里修改样式，所以能生效。

以下是两种可行的解决方法：

方法1：用JavaScript向iframe注入CSS #

如果iframe的源站点（tuning-shop.com）没有严格限制跨域访问，你可以通过JS动态把样式注入到iframe中：

1. 复制下面的代码，替换其中的CSS选择器为你在开发者工具中找到的对应选择器（比如.powered-by或#powered-by-footer这类）：

document.addEventListener('DOMContentLoaded', function() {
  const targetIframe = document.querySelector('iframe[src*="tuning-shop.com"]');
  if (!targetIframe) return;

  targetIframe.onload = function() {
    try {
      const iframeDocument = targetIframe.contentDocument || targetIframe.contentWindow.document;
      const styleElement = iframeDocument.createElement('style');
      styleElement.textContent = `
        /* 替换成你找到的准确选择器 */
        .powered-by-text, 
        #powered-by-header {
          display: none !important;
          visibility: hidden !important;
        }
      `;
      iframeDocument.head.appendChild(styleElement);
    } catch (error) {
      console.error('跨域限制导致无法修改iframe内容:', error);
    }
  };
});

2. 在WordPress中添加这段代码：
   • 方式一：进入「外观」→「主题文件编辑器」，找到footer.php，在</body>标签前粘贴代码；
   • 方式二：使用自定义HTML小工具，将代码放到页脚区域；
   • 方式三：用代码片段类插件（比如Code Snippets）添加这段前端代码。

方法2：联系iframe服务提供商或检查嵌入参数 #

如果跨域限制导致JS无法生效，试试这两个途径：

• 查看tuning-shop.com的嵌入文档，看是否提供隐藏版权的参数（比如?hide_branding=true），添加到iframe的src地址中；
• 联系tuning-shop.com的客服，询问是否有白名单或付费选项可以移除版权文本。

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