60478_zh-TW

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 父頁面，以查看是否有可用的額外資訊。由於此策略生效，我們遇到了錯誤，因為新的預設策略不再允許我們存取該父頁面。我們已經在 JMP 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-2019574712">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>