如何将更少的变量更改推送到 html iframe？

Posted 2023-05-09

【中文标题】如何将更少的变量更改推送到 html iframe？

【英文标题】：How to push less variable changes to an html iframe?

【发布时间】：2015-04-07 20:54:21

【问题描述】：

问题：如何将更少的变量更改推送到 iframe？

示例： http://bootstrap-live-customizer.com/

更多详情： 当 bootstrap less 变量发生变化时，它会自动将变化刷新到嵌入的 iframe 上？

我保存了上面的网页，但无法正常工作。我正在尝试完全了解 bootstrap-live-customizer.com 所做的事情，但会为 CMS 主题实现它。谢谢

【参考方案1】：

您并没有就您尝试过的任何解决方案、您正在使用的技术或您正在使用的代码和标记给出任何示例。这可能有助于我们为您提供更准确的帮助。

你需要做的是将less的内容编译成css，然后刷新iframe。如果您介意服务器端 nodejs 代码http://lesscss.org/

，这可能会对您有所帮助

刷新 html 中的 iframe document.getElementById(#idOfIFrame).contentDocument.location.reload(true);

然后，您可以将 less 文件样式表添加到 iframe 的头部。答案在这里找到：less-css-file-include-in-head-section

另一个类似的答案：how-can-i-compile-less-files-within-browser

【讨论】：

通过示例我的意思是您尝试过的一些代码不起作用。提供一个不属于您的网站并作为示例完全没有帮助。您可以使用许多不同的 javascript 库和技术，例如 NodeJs。这是服务器端还是前端开发？你的问题一点都不具体。 iframe 在您的网页中充当单独的浏览器，我提供的 *** 链接中的任何帮助也将在此处提供帮助（有一些更改）。

而且每个问题都不是关于代码的。一些答案可能是例如 - 1）使用 livereload.js 刷新页面以检测 css 更改 2）您需要一个较少的编译器来检测较少的更改并即时转换为 css 3）livereload.js 可以检测更改并显示变化 - 这是一个很好的例子，但不会完全回答你的问题 - youtube.com/watch?v=MhODHoaats0

如您所见 - 这不仅仅是关于代码 - 我是一名开发人员，并且要求这样的代码需要 10 个 *** 问题。

我只是想帮助您走上正轨。我不能为你从头开始编程。我真的不知道你在解决什么样的问题，或者你打算如何解决它。我在答案中添加了更多内容，这可能会有所帮助。保存该网页也可能无法正常工作，因为他们有一个服务器正在编译您保存网页时未包含的内容。

据我所知，您可能需要一个服务器端应用程序来做很多繁重的 css 编译工作。我相信 lesscss 可以在没有服务器应用程序的浏览器中工作，尽管不推荐。 link

【参考方案2】：

我终于搞定了 :)

第 1 步 - 从 github 下载较少的 php 编译。 https://github.com/oyejorge/less.php

第 2 步 - 您只需要包中的一个文件 Less.php。

第 3 步 - 现在设置 iframe，使用引导网格编写 左侧边栏和右侧 iframe 的 php/html。

第 4 步 - 开始，在左侧，这是主页面，只需添加 带有字体选项的选择框 - Arial、Open Sans .... 将 表单中的选择框。这个选择框将作为我们的第一个 less 变量选择器只是一个例子。

第 5 步 - 回到您的 iframe，下面的代码是一个示例

$parser = new Less_Parser();
$parser->parse( '@fontfam: <Post Your PHP variable here from Select using POST>; #header  font: @fontfam;  h2  color: @color; ' );
$css = $parser->getCss();
<Write $css  to a css file for example theme.css>

第 6 步 - 创建一个仅刷新 iframe 的应用按钮 - 请注意，iframe 现在会选择新的 theme.css。

Viola - 我对此进行了测试并且正在工作。这就是您将较少变量推送到 iframe 的方式。

另一种方法是使用 node.js（在 github 上搜索）。逻辑几乎一样，使用node.js是不需要浏览器来运行java脚本-服务器可以做到。