尝试在 Wordpress 中的 17Hats iFrame 中进行样式设置

Posted 2023-05-09

【中文标题】尝试在 Wordpress 中的 17Hats iFrame 中进行样式设置

【英文标题】：Trying to styling inside a 17Hats iFrame in Wordpress

【发布时间】：2018-08-04 01:26:51

【问题描述】：

我查阅了各种指南，发现使用 jQuery 在技术上是可行的，因此我下载了 Header and Footer Scripts（一个插件）并设法获得了一个使用 jQuery 的 console.log。

我目前的代码是：

<script type="text/javascript">
  jQuery(document).ready(function()  
    console.log('Hi');
  );
</script>

我想在 iFrame 0 中设置一个按钮的边框半径，它是 Id="lc_form_submit"，那么我可以这样做吗？

我想做更多，但如果我能得到他的帮助，我可能会弄清楚其余的部分

谢谢！

【参考方案1】：

简答：

不再可能操纵内容来自您的域之外的 iframe。**

更长的答案：

您所拥有的是将Hi 记录到您网站控制台上的代码 - 这也不需要 jQuery 包装器，您只需执行 <script type="text/javascript">console.log('Hi');</script>，因为控制台日志记录不需要 jQuery。

不幸的是，jQuery 不允许您操作不在同一域中托管的 iframe 的内容。以前是这样，但有大量恶意 XSS 问题。

例如，如果您尝试这样做：

<iframe id="hats" src="https://17hats.com/iframe/"></iframe>

<script type="text/javascript">
  jQuery(document).ready(function($)
    $('#hats').contents().find('body').html('<div>Hello World</div>');
  );
</script>

你会得到错误Blocked a frame with origin "[your-website]" from accessing a cross-origin frame.

我一般会查找一些关于 Cross Origin 和 XSS 的参考资料。

基本上，如果您使用不受控制的 iframe 内容，您将无能为力。

【讨论】：

如果您坚决想更改按钮的边框半径，则需要使用 php cURL 请求或 jQuery.load() 函数来获取标记，在 PHP 或 Javascript 中对其进行操作，然后输出 - 老实说，对于边界半径来说，waaaaay 工作量太大了。如果您确实需要（生或死）做更多的边界半径之外的事情，老实说，因为您仍在弄清楚console.log('Hi');，这可能是对平台上更经验丰富的开发人员的要求Fiverr 或 codersclan。

所以我尝试了您的代码并得到了 - Invalid or unexpected token。知道问题是什么吗？抱歉，我不明白您说的 Fiverr 或 codersclan 是什么意思？

您阅读我的全部答案了吗？我的代码中确实有错字（已修复），但要点是 不可能操纵 iframed 内容，即使使用 jQuery。如果你绝对需要，你需要付钱给开发人员来找出解决方案——Fiverr 和 CodersClan 是你可以为项目聘请开发人员的网站。但根据 17hat 的服务器设置方式，它甚至可能是不可能的。

我确实读过它。对不起，我好像误会你了。我的印象是我应该看看你的代码会吐出什么以及它是否会出错。虽然它不会引发错误

我已经澄清了一点答案，但简短的回答是：你想要完成的事情不再可能 - 尽管它曾经是。

【参考方案2】：

如果您的 iframe 内容是跨域的，则您无法访问其 DOM。

否则this 是您在纯 Javascript 和 jQuery 中的操作方式。