1. 概述
1.1 版本
| 網頁框控件插件 | App | HTML5 移動端展現插件 | 新增功能 |
|---|---|---|---|
| - | 10.4.90 | 10.4.90 | 移動端預覽時，網頁框根據内嵌的模板自适應高度 |
1.2 問題描述
決策報表中，沒有提供網頁框控件。這使得在嵌入引用其他網頁或者報表的時候，很不方便。
1.3 解決方案
爲了解決在決策報表中引用其他 Web 鏈接的問題，用戶可以使用「網頁框控件插件」。
注：網頁框控件插件不支持流媒體。
2. 插件介紹
2.1 安裝插件
點擊下載插件： 網頁框控件插件
設計器插件安裝方法請參見：設計器插件管理
服務器安裝插件方法請參見：服務器插件管理
2.2 添加網頁框控件
插件安裝完畢後，新建決策報表，點擊「控件欄」，新增了「網頁框控件」，拖動到決策報表 body 界面，即可添加。如下圖所示：
2.3 地址和參數
選中「網頁框控件」，可以設置「地址和參數」，步驟如下圖所示：
2.3.1 地址
支持添加兩種類型的鏈接。
1）模板路徑
「模板路徑」爲相對路徑，點擊「···」，出現模板選擇，選中需要的模板即可，如下圖所示：
2）網絡路徑
「網絡路徑」爲絕對路徑。「網絡路徑」的應用場景及方法如下表所示：
注：網絡路徑公式狀态下，直接輸入鏈接即可，鏈接前不能有「=」。
| 應用場景 | 備注 |
|---|---|
| 預覽模板 | 輸入模板預覽鏈接 http://IP:端口号/工程名，如下所示：http://localhost:8075/webroot/decision/view/report?viewlet=GettingStarted.cpt |
| 預覽視頻 | 方法一： 輸入完整視頻網頁 URL ，如下所示： https://www.iqiyi.com/v_19rxqx1kww.html?vfrm=pcw_home&vfrmblk=B&vfrmrst=fcs_0_p11 方法二： 将下載後的視頻保存在%FR_HOME%\webapps\webroot，輸入鏈接http://IP:端口号/工程名/視頻名稱，如下所示： http://localhost:8075/webroot/6.gif |
| 預覽自定義 HTML 頁面 | 将自定義的 HTML 頁面保存在%FR_HOME%\webapps\webroot，輸入鏈接http://IP:端口号/工程名/HTML頁面名稱，如下所示：http://localhost:8075/webroot/1.html |
2.3.2 參數
示例：
1）「網絡路徑」下若添加了參數及默認值，鏈接使用 模板預覽 鏈接，示例鏈接爲：http://localhost:8075/webroot/decision/view/report?viewlet=doc%252Fphone%252F%25E5%258A%25A8%25E6%2580%2581%25E5%2588%2586%25E7%25BB%2584.cpt如下圖所示：
效果如下圖所示：
2）若參數拼接在模板鏈接 URL 尾部，「網絡路徑」示例鏈接爲：http://localhost:8075/webroot/decision/view/report?viewlet=doc/phone/動态分組.cpt&銷售員=孫林&産品類型=飲料&産品=牛奶
如下圖所示：
效果如下圖所示：
注1：同模板多個「網頁框」配置同一個鏈接，會相互影響（不同參數視爲不同鏈接）。
注2：網頁框裏挂載 BI 模板鏈接時，參數需要拼接到鏈接後 。
2.4 滾動條
「網頁框」的寬高就是所在單元格的寬和高，當嵌入的網頁的寬或高超過網頁框的寬高值時，就會出現相應的「水平滾動條」與「垂直滾動條」。
屬性設置中，「水平滾動條可見」與「垂直滾動條可見」默認勾選。
若取消勾選，預覽模板時，不可見滾動條且無法滾動，超出「網頁框」大小的内容會被截斷不顯示。
2.5 組件大小
當 body 布局方式設置爲「絕對布局」時，可自定義組件大小。如下圖所示：
2.6 支持自适應高度
移動端自适應規則如下表所示：
| 所在模板類型 | 所在模板布局 | 内嵌模板類型 | 内嵌模板布局 |
|---|---|---|---|
| frm 模板 | 移動端手機重布局（body 内/ Tab 内） | FR 模板 | cpt 模板不自适應 |
| cpt 模板橫向自适應 | |||
| frm 模板 body 的移動端 Tab 頁下勾選 手機重布局 | |||
| frm 模板 body 的移動端 Tab 頁下不勾選 手機重布局 ，且 組件縮放 選擇橫向自适應 | |||
| 不勾選 手機重布局，且縮放邏輯爲固定大小 |
需注意以下幾點：
「網頁框控件」自适應時，凍結不生效。
「網頁框」内配置跨域的鏈接，「網頁框」自适應不生效 。
Android App 上，模板 A 的「網頁框控件」中内嵌模板 B ，外部手勢（滑動模板 A ）與内部手勢（滑動模板 B ），每次只能響應一個，另一個禁用。
3. JavaScript 接口
決策報表裏有一個網頁框控件 「rHIframe0」，用戶可新增「按鈕控件」，添加不同的「點擊事件」，以達到不同的效果。如下圖所示：
3.1 setValue(String)
設置并刷新「網頁框控件」的地址(保留原參數)
3.1.1 模板路徑
var Widget = this.options.form.getWidgetByName('rHIframe0');
Widget.setValue("${servletURL}?viewlet=GettingStarted.cpt");3.1.2 網絡路徑
var Widget = this.options.form.getWidgetByName('rHIframe0');
Widget.setValue("http://localhost:8075/webroot/decision/view/report?viewlet=GettingStarted.cpt");
3.2 reload()
重新刷新網頁框：
var Widget = this.options.form.getWidgetByName('rHIframe0');
Widget.reload();3.3 loadUrl(String)
加載指定的 URL 鏈接地址。
3.3.1 模板路徑
var Widget = this.options.form.getWidgetByName('rHIframe0');
Widget.loadUrl("${servletURL}?viewlet=GettingStarted.cpt");3.3.2 網絡路徑
var Widget = this.options.form.getWidgetByName('rHIframe0');
Widget.loadUrl("http://localhost:8075/webroot/decision/view/report?viewlet=GettingStarted.cpt");4. 移動端
App 和 H5 插件版本在 10.4.61 及之後時，「網頁框控件插件」支持在移動端使用。
注1：移動端不支持 JavaScript 接口。
注2：通過「網頁框控件插件」預覽模板時，移動端不支持顯示模板中的參數面板。
5. 注意事項
5.1 不需要網頁框自适應
當縮放或拖拉浏覽器窗口時，新版本的「網頁框控件插件」會因自适應而自動刷新網頁框引用的模板，若不需要刷新，暫時請下載更新日期爲2020-02-07（版本号爲 7.6）及之前的網頁框控件插件版本，并本地安裝。
點擊下載插件：網頁框控件插件 7.6 版本
5.2 内嵌 BI 模板報錯
當「網頁框控件」内嵌 BI 模板，點擊預覽時，出現如下報錯：
打開 FineBI 服務器，用管理員賬号登錄，點擊管理系統>安全管理>安全防護，關閉 Security Headers 即可。
注：Security Headers 默認開啓。
