JavaScript：将所见即所得编辑器对实时站点的更改转换为jQuery操作

上下文

作为Meteor.JS应用程序的一部分，我需要创建一个可视化编辑器，允许用户执行以下操作：

键入实时站点的URL（可以是任何站点，无需JS代码段）

在应用程序内的iframe/wysiwyg编辑器中查看站点

选择此网页中的文本/图像并以可视方式更改其内容

在后端，我需要将上述操作转换为两部分：

jQuery选择器告诉我哪个元素已更改

指示新文本/图像url的值

问题

我找到了以下WYSIWYG编辑器，它似乎很适合这篇文章的编辑部分：-但是，有两篇文章我不确定：

如果我在一个站点中加载这个插件，我可以使用它，但我不确定如何在第三方站点上使用它（例如，像Chrome开发工具那样）

我不知道如何将所做的更改转换为jQuery选择器和值

---

如果您能深入了解此问题的任何一部分，我们将不胜感激。

对于有相同问题的人，我找到了两种解决此问题的方法：

JS Snippet：如果第三方站点中有一个JS Snippet，您可以使用postMessage方法与之通信。更多信息请参见：

无JS代码段：如果第三方站点中没有JS代码段，您可以使用代理将站点加载到iframe中。代理充当中间人，允许您在将代码加载到iframe之前将其注入站点。这里清楚地描述了该过程：

---

对于任何有相同问题的人，我找到了两种方法来解决这个问题：

JS Snippet：如果第三方站点中有一个JS Snippet，您可以使用postMessage方法与之通信。更多信息请参见：

无JS代码段：如果第三方站点中没有JS代码段，您可以使用代理将站点加载到iframe中。代理充当中间人，允许您在将代码加载到iframe之前将其注入站点。这里清楚地描述了该过程：

---

您的主要问题是获取第三方域客户端的源。AJAX已经退出，因为大多数站点都不会启用CORS，而iframe也可能退出，因为大多数站点都将

X-Frame-Options

设置为

deny

。这使您可以使用服务器端代理（即向客户端上指定的域发出服务器端请求，并返回HTML）谢谢您的输入！如果我把一个JS片段放在目标站点的？我基本上需要重新创建一些Chrome开发工具的功能。。。考虑到我实际上并没有试图更改实时站点，我不认为这会有什么大不了的，我只需要jQuery选择器作为输出。我担心这不会有什么不同。跨域请求的安全性对于JS来说非常严格。您面临的主要问题是获取第三方域客户端的来源。AJAX已经退出，因为大多数站点都不会启用CORS，而iframe也可能退出，因为大多数站点都将

X-Frame-Options

设置为

deny

。这使您可以使用服务器端代理（即向客户端上指定的域发出服务器端请求，并返回HTML）谢谢您的输入！如果我把一个JS片段放在目标站点的？我基本上需要重新创建一些Chrome开发工具的功能。。。考虑到我实际上并没有试图更改实时站点，我不认为这会有什么大不了的，我只需要jQuery选择器作为输出。我担心这不会有什么不同。对于JS来说，跨域请求的安全性非常严格。