60478_zh-CN

liliconcom

在网站上发布交互式 HTML 图表

你好，

我想将交互式 JMP HTML 文件放到我的个人网站上，该网站由 Squarespace 托管。目前看来，唯一的方法是：1) 在 Chrome 上打开交互式 HTML 文件；2) 复制 HTML 脚本（使用 Mac 的“开发者”选项）；3) 将脚本粘贴到我网站的代码框或“嵌入”框中。这种方法确实有效（尽管我总是收到错误信息，提示代码太长）。但是，它总是将交互式图表放在页面底部的页脚下（无论我将代码框“放”在哪里）。有什么方法可以修改脚本，使交互式图表真正出现在我想要的位置吗？或者，有没有一种方法可以直接在网站上“发布”交互式图表，而无需编写脚本？（我知道黑客可以通过这种方式窃取我的数据；但这与我无关。我希望有人窃取我的数据，因为这是为了公共利益！）。

回复：在网站上发布交互式 HTML 图

感谢@Michael_Goff的详细回答。

我将与当地 IT 部门核对我的选择，以找到适合我的长期解决方案。

感谢您和大家的帮助！

亚当。

回复：在网站上发布交互式 HTML 图

嗨，亚当！

此主题最初发布于 2018 年，自发布以来，互联网生态系统发生了一些变化。此嵌入方案失败的原因是浏览器安全策略的变化。2020 年，Chrome 和其他浏览器将其一项名为“ 推荐人政策 ”的策略的默认值更改为更安全的值。此举旨在帮助保护您的数据。新的默认策略称为“strict-origin-when-cross-origin”。请注意，当托管内容的服务器未指定其他策略时，将使用默认策略。这意味着，当两个网页尝试相互通信时，它们需要具有相同的来源。在这种情况下，来源是指相同的协议、主机名和端口。

您遇到的问题是此浏览器策略变更导致的。在 JMP 17 中，我们的交互式 HTML 报告会 ping 父页面，以查看是否有可用的额外信息。由于此策略生效，我们遇到了错误，因为新的默认策略不再允许我们访问该父页面。我们已经在 J​​MP 18 中解决了这个问题。这将是解决问题的最简单方法。

就您而言，您似乎正在通过文件系统访问这些 HTML 页面：

window.onload（文件://isshfs.xxxxx.com/......./Tool_Counters/Counters.htm:1572:1014711）

如果不查看完整的 URL，完全诊断起来会有些困难，但有些浏览器对待文件：//协议路径的方式与托管在 Web 服务器上的页面不同，会将它们视为“跨域”。确保这些文件位于同一来源的一种方法是将它们托管在 Web 服务器上。最好将父页面放置在类似https:// 的路径上。 .com/iframe_example.html以及要从https://托管的子页面.com/Counters.html。

有时我们会使用名为实时服务器的 VS Code 插件来测试本地 Web 服务器。它允许我们使用文件系统中某个文件夹中的内容快速启动 Web 服务器。但是，对于任何类型的生产用途，您可能都需要联系 IT 部门来启动 Web 服务器来托管这些页面。

再次，托管网络服务器是嵌入 JMP 17 交互式 HTML 报告的一种解决方法。在 JMP 18 中，我们添加了修复程序以避免遇到该错误，您应该能够再次从文件系统嵌入这些页面。

谢谢，

迈克尔·戈夫

回复：在网站上发布交互式 HTML 图

谢谢，亚当。

我在 Chrome 和 Firefox 中测试了该页面，尽管控制台中显示错误，但页面仍然加载成功。在 Edge 中，正如您所发现的，现在我也能复现这个问题了，iFrame 无法加载。我将向内部寻求帮助。请继续关注。

谢谢，

~约翰

回复：在网站上发布交互式 HTML 图

我不介意在这里剪毛。

好像不起作用。

回复：在网站上发布交互式 HTML 图

嗨，亚当，

您的主网页包含交互式 HTML 页面的方式中可能存在某些被视为未捕获的异常的情况。

有很多方法可以做到这一点。以下是通常最简单有效的方法之一：

主页将包含以下内容：

    <TITLE>iFrame Example</TITLE>


    <H1 id="toc-hId-2019574710">iFrame Example</H1>
    <P>Below is an example of an embedded Interactive HTML file using and iframe.</P>
    <IFRAME src="https://community.jmp.com/bivariate.html" height="900" width="500" title="iframe example"></IFRAME>

在这种情况下，bivariate.html 是从 JMP 导出的交互式 HTML 文件。

使用 JMP 17 Interactive HTML 文件完成此操作时，控制台中将显示网络错误，

“获取文件：///C：/api/webjmp net :: ERR_FILE_NOT_FOUND”

但它不应该阻止页面加载。

如果可以的话，请尝试一下并告诉我是否有效。

如果您的主页使用 JavaScript 来加载交互式 HTML 页面，您可能需要使用 try/catch 块来处理/忽略网络故障，以便它可以继续加载页面。

如果您需要帮助，请联系 JMP 技术支持提供更多详细信息，除非您愿意在此论坛分享。

~约翰

回复：在网站上发布交互式 HTML 图表

它们位于同一台服务器上（在同一个主文件夹中）。

我还尝试将它们移动到不同的服务器和我的桌面。

不幸的是，我遇到了同样的错误。

亚当。

回复：在网站上发布交互式 HTML 图

@AdamChoen ,

当包含 iframe 的网页与 iframe 引用的交互式 HTML 页面位于不同的服务器上时，就会发生此错误。如果您可以将交互式 HTML 内容移动到与包含 iframe 的页面相同的服务器/域，此错误应该会消失。

在 JMP 18 中，我们通过修改交互式 HTML 输出解决了这一限制。

~约翰

回复：在网站上发布交互式 HTML 图

@John_Powell_JMP

我认为这就是我的问题的相关错误

未捕获（在承诺中）DOMException：无法从“Window”读取命名属性“document”：阻止来源为“null”的框架访问跨源框架。
在 window.onload 处（文件://isshfs.xxxxx.com/......./Tool_Counters/Counters.htm:1572:1014711）

回复：在网站上发布交互式 HTML 图

@AdamChoen ,

当您打开嵌入了 JMP 17 交互式 HTML 页面的网页时，请检查浏览器控制台（右键单击，检查，然后选择控制台）以查看是否报告了任何错误。

如果有的话，请将它们复制到这里，以便我了解可能出现的问题。

谢谢，

~约翰

回复：在网站上发布交互式 HTML 图表

@John_Powell_JMP有一个问题，如果你@mntion 某人在电子邮件中收到 ping 信息，你也许可以回答 Adam @AdamChoen 。

亚当·乔恩

三级

2024年5月29日 下午3:01 | 回复发表于 来自 cwillden 的消息 06-22-2018

对于我来说，JMP17 交互式 HTML 中的 Iframe 不再起作用。

感谢一些 TSing 线索

谢谢，亚当

回复：在网站上发布交互式 HTML 图

对于我来说，JMP17 交互式 HTML 中的 Iframe 不再起作用。

感谢一些 TSing 线索

回复：在网站上发布交互式 HTML 图

我给 OneDrive 写了个投诉，说他们无法处理 HTML 文件。在 OneDrive 里“打开”一个交互式 HTML 文件时，它只显示代码！你以为微软能搞定这个任务吗……

我确实想在这里提一下，以防非 JMP 专家/员工偶然发现这篇文章，原始数据可以从交互式图表中提取出来（也就是说，黑客可以获取你的数据并重现它们）。我认为，出于这个原因，目前在个人网站上发布这类交互式图表的需求并不大（这也是为什么这是关于这个主题的第一篇文章）。我主要专注于对已发表的数据进行荟萃分析，所以这对我来说不是什么问题。

回复：在网站上发布交互式 HTML 图表

这次请求和回复都太棒了！谢谢！

去年，在进行有关共享交互式 HTML 的演示之前，我尝试过 Dropbox、GoogleDrive 和 OneDrive，但不得不报告一些令人失望的发现。

很高兴知道还有其他可行的替代方案。

顺便说一句，iFrames 也可以在 JMP 社区中使用！

回复：在网站上发布交互式 HTML 图

顺便说一句，这也是一个“可接受”的解决方案；它对我不起作用的原因是我的网站或云服务都无法正确“托管”交互式 HTML 文件。事实证明，亚马逊的 S3 服务器可以做到这一点，因此，使用您的脚本并提供指向我在 S3 云上找到的交互式 JMP HTML 图表的链接后，图表就会出现在正确的位置，我不需要粘贴那 200 页的脚本。

回复：在网站上发布交互式 HTML 图

太棒了！另外，给其他感兴趣的朋友提个醒：Google Drive 也用不了（交互式 HTML 文件无法托管在 Google Drive 上，也无法在脚本中引用并显示在网站上）。我很好奇，为什么这些主流云平台中只有 S3 支持交互式 HTML（不过我没试过苹果的 iCloud）。难道不应该大家都已经切换到这种语言来处理交互式文件类型了吗？

我的下一步是在我的网站上显示一份包含多个窗口的 JMP 报告。我猜想就操作步骤而言，它应该和单个图表没什么区别（前提是我使用 S3）。

回复：在网站上发布交互式 HTML 图

很高兴它能帮到你！别忘了，如果你使用 JMP Pro，还可以将你的 JMP 模型导出到评分代码，并托管在 AWS 上：

https://dfd3m9li3aipf.cloudfront.net/index.html

或者将它们（作为 JavaScript 评分代码）直接嵌入到您的 HTML 动态页面中：

http://jmp.scoring.iris.s3-website.us-east-2.amazonaws.com/

http://jmp.valentine.s3-website-us-east-1.amazonaws.com/

回复：在网站上发布交互式 HTML 图

好主意！我不知道为什么我之前不直接复制粘贴你的代码，但你的图表在我的网站上显示正常。关于 OneDrive 处理 HTML 文件的问题有很多抱怨（它们以脚本形式打开，而不是 OneDrive 中的最终成品）。我刚刚在 Dropbox 上试了一下，也遇到了和 OneDrive 一样的问题。我想知道是不是因为通过链接共享文件时，链接看起来不像普通的网站链接（比如你的链接）？例如： https /www.dropbox.com/s/dwjyb5n0fk24zoo/Fit%20Y%20by%20X.html?dl=0 。有趣的是，OneDrive 有一个“嵌入”功能，可以解决这个问题（它会提供 HTML 代码供你复制到你的网站），但讽刺的是，它对交互式 HTML 不起作用！

无论如何，我刚刚注册了一个 S3 账户，而且它真的有效！哥们，我从来没想过做这件事会这么麻烦，不过我觉得，多亏了你的帮助，用 S3 托管 JMP 的交互式 HTML 文件，然后引用 S3 文件链接是一个可行的解决方案。非常感谢你的帮助（也感谢其他人的帮助）。

回复：在网站上发布交互式 HTML 图

您可能必须在 One Drive 中启用可见性属性才能让页面报告正确的 MIME 类型。

Square Space 也可能出于安全原因阻止所有外部页面（或所有外部 JavaScript 内容）。

尝试创建一个指向我在 S3 上的交互式 HTML 页面的 iframe。URL 在我的第一篇博文里。

这样您就会知道问题出在 One Drive 还是 SquareSpace。

另外，检查你的 JavaScript 控制台是否有错误消息，你可能会在那里找到线索。

回复：在网站上发布交互式 HTML 图

你好，

这听起来是个不错的方案，但它不适用于 One Drive（我当前的文件共享/存储设备）。我之前把交互式 HTML 文件托管在那里，并在 Squarespace 上引用它，但它在我的网站上只显示为一个空框。也许我以后会试试 S3，但看起来应该是一样的，对吧？也许是 Squarespace 的问题……

回复：在网站上发布交互式 HTML 图表

您可以将生成的 HTML 托管在 S3 中，并从那里将 iframe 指向它。以下是示例：

http://blog.nascif.com/2015/08/a-software-developers-career-visualized.html

相关代码：

<a href="https://s3-us-west-2.amazonaws.com/jmp.examples/career/index.html</A&gt" target="_blank">https://s3-us-west-2.amazonaws.com/jmp.examples/career/index.html</A&gt</a>;" width="100%">

回复：在网站上发布交互式 HTML 图

这主意不错，但 Squarespace 显然不允许！他们是这样告诉我的：

“人们仍然可以下载 html 文件，只是无法通过 Squarespace 链接在浏览器中打开并像 .pdf 文件那样获得静态 URL。”

我有点希望这家伙是错的，所以我将尝试找出一种解决方法来按照你的方式去做，这在大多数其他网站上似乎是可行的！

否则，我需要回去粘贴 200 页的代码......

如果成功我会告诉你。再次感谢你的帮助。在个人网站的正确位置发布交互式 HTML 代码肯定是可行的！

安德森

回复：在网站上发布交互式 HTML 图

I found a really easy solution! You can embed an html page within another html page using tags.  Here's a really simple example:</P><PRE><!DOCTYPE html> <html> <head> <title>Main Page</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="initial-scale=1.0"> <style> iframe { width: 100%; height: 600px; } </style> </head> <body> <p>Some content above.</p> <iframe src="Graph%20Builder.htm">

下面有一些内容。

在打开的 iframe 标签中，链接到 JMP 交互式 HTML 文件。您需要将该文件上传到 Foursquare，以便 Foursquare 能够找到它并确保路径正确。您还需要为 iframe 添加样式，以便根据需要调整其大小。在 tags, I made the iframe as wide as possible and 600 pixels tall.</P><br /><P>Here's what my result looks like.<span class="lia-inline-image-display-wrapper lia-image-align-inline" image-alt="iframeexample.PNG" style="width: 592px;"><img src="https://us.v-cdn.net/6038925/uploads/images/11223i427DB074EDA86FA5/iframeexample.PNG" role="button" title="iframeexample.PNG" alt="iframeexample.PNG" /></span></P><br /><br /><br /></lingo-body>

回复：在网站上发布交互式 HTML 图

盖尔，

感谢您的回复。分享 HTML 文件/链接很容易。我想做的是让交互式图表出现在我的网站上。目前为止，这可以通过复制大量 HTML 代码并将其粘贴到代码框中来实现。我不明白的是，为什么它总是将我的交互式图表放在页脚区域，而不是页面中的正确位置。我认为这只需要修改一下代码，所以我联系了 Cameron，看看他能否帮我指出代码中到底需要修改哪些地方。另一种方法是直接告诉读者滚动到页面底部！

我对此非常兴奋。我甚至还嵌入了一个移动的气泡图，方便读者/用户调整速度、时间等等。一旦我把它摆放正确，我的网站就会充满移动/交互式的 JMP 图！

感谢您的帮助，

安德森

回复：在网站上发布交互式 HTML 图

卡梅伦，

我尝试过 JMP 和 Squarespace，谢天谢地，我只需粘贴 150 页 HTML 代码，就能将最复杂的图表（包括移动气泡图！）嵌入到我的网站中。一直存在的问题是，如何将其放置在页脚中（正如我上次提到的）。您提到了一个解决方案，即在脚本中添加一个 >div。在 MONSTER HTML 脚本的最后，有这样一行代码： 我是否需要将其中一个“body”改成“div”？还是说这样做更复杂？我尝试过单独修改它们，然后合并成 div，但是由于我对脚本一无所知，我的做法可能比这更复杂！有什么想法吗？我附上了 200 页的 HTML 代码供参考。

谢谢，

安德森

回复：在网站上发布交互式 HTML 图

你好，安德森，

JMP 的一些人正在尝试寻找解决您问题的方法，并且我们已经记录了未来 JMP 增强的需求，以满足您描述的需求。

正如我在您第一次询问时提到的，以下是要分享的步骤。

1. 创建图表并将其保存在某处。（您已经这样做了）。
2. 关键是你需要共享 .htm 文件。所以 a) 你可以把它附加到一封电子邮件中，告诉他们如何打开它。（我已经把我的邮件发给你了。试试打开它。）b) 你可以把它放在共享驱动器上，这样当他们点击它时，它就会打开。（我还附加了一个我发布的、可以用 Chrome 打开的链接。你需要用 Chrome 才能打开它。）
3. 或者，您可以发布一个或多个报告，并对 .html 文件执行相同操作。https /www.jmp.com/support/help/14/create-a-web-report.shtml

回复：在网站上发布交互式 HTML 图表

卡梅伦，

非常感谢您的回复。看来情况和我担心的一样：我无法直接把交互式图表粘贴到网页上！Squarespace 支持 CSS、Java 和 HTML，所以我明天会试试您的建议。讽刺的是，Squarespace 的设计初衷就是为了避免任何脚本的编写，尽管在紧急情况下它也能做到。再次感谢您的建议，我稍后会汇报我的成功（或失败），以防其他 JMP 用户也有兴趣在他们的网站上发布交互式 HTML 图表！Anderson

回复：在网站上发布交互式 HTML 图

你好@abmayfield ，

这可能有点棘手。这些文件并非为了方便复制/粘贴图表嵌入网站而构建的。您熟悉 HTML、CSS 和 JavaScript 吗？我还没有在网站上放过任何 JMP 图表，但我导出了一个 Graph Builder 示例来了解它的结构。所有操作都发生在标签内。实际的 DOM 只是包含 CSS 和 JavaScript 的 head 标签，以及空标签。JavaScript 会将所有内容插入到标签中。

如果你想尝试一下，我建议你剪掉 tags and putting that into a CSS file, and then clipping out all the JavaScript in the <script> tags and saving that as a .js file.  I don't use foursquare, but I found this which may be helpful for adding your own custom CSS and Javascript: <A href="https://support.squarespace.com/hc/en-us/articles/205815928-Adding-custom-HTML-CSS-and-JavaScript" target="_self" rel="nofollow noopener noreferrer">https://support.squarespace.com/hc/en-us/articles/205815928-Adding-custom-HTML-CSS-and-JavaScript</A></P><br /><P>The JavaScript is pretty unreadable in its unformatted state.  I'm guessing it is ending up in the footer because the JavaScript just appends the content to the tag, so it will go right at the end.  You could add a <div> to the body and edit the JavaScript to to write to that div instead.</P><br /><P>Also, I'm sure there will be some conflicts with the CSS that JMP provides with your website's own styling, so that may have some unintended consequences.  If you know what you're doing, you can probably sort that out.</P><br /><P>Good luck!</P></lingo-body>