成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

VUE頁(yè)面中加載外部HTML

張憲坤 / 3570人閱讀

摘要:所以,在頁(yè)面顯示的時(shí)候,如果以頁(yè)面內(nèi)嵌的形式顯示這個(gè)說(shuō)明文件。本文思路是把請(qǐng)求以來(lái),以的形式加載到頁(yè)面內(nèi)部。

前后端分離,后端提供了接口。但有一部分?jǐn)?shù)據(jù),比較產(chǎn)品說(shuō)明文件,是存在其他的服務(wù)器上的。
所以,在頁(yè)面顯示的時(shí)候,如果以頁(yè)面內(nèi)嵌的形式顯示這個(gè)說(shuō)明文件。需要搞點(diǎn)事情以達(dá)到想要的效果。

不同以往的IFRAME標(biāo)簽,那種方式比較Low,另外有其他的一些BUG。
本文思路是把HTML請(qǐng)求以來(lái),以v-html的形式加載到頁(yè)面內(nèi)部。注冊(cè)全局組件【v-html-panel】

1.HtmlPanel.vue文件



htmlViewSample.vue



上一張效果圖
...]

注意事項(xiàng):

直接使用axios處理的GET請(qǐng)求,需要處理跨域

外部的css樣式會(huì)作用到顯示的html

同時(shí)加載的外部html里的script也可能會(huì)執(zhí)行,需要按需處理下

外部HTML文件內(nèi)部的相對(duì)路徑將不會(huì)被自動(dòng)識(shí)別,絕對(duì)路徑可以


NGINX跨域配置:
(Origin如果使用*的話(huà),好像會(huì)出錯(cuò),這里直接使用請(qǐng)求源的地址,如果擔(dān)心安全性的話(huà),可以用if+正則條件判斷下)

location / {
    add_header Access-Control-Allow-Origin $http_origin;
    add_header Access-Control-Allow-Credentials true;
    add_header Access-Control-Allow-Methods GET;

    access_log  /data/nginx/logs/fdfs_https.log  main;

    ...
}

文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址:http://systransis.cn/yun/39600.html

相關(guān)文章

  • 再談JavaScript模塊化

    摘要:應(yīng)用日益復(fù)雜,模塊化已經(jīng)成為一個(gè)迫切需求。異步模塊加載機(jī)制。引用的資源列表太長(zhǎng),懶得回調(diào)函數(shù)中寫(xiě)一一對(duì)應(yīng)的相關(guān)參數(shù)假定這里引用的資源有數(shù)十個(gè),回調(diào)函數(shù)的參數(shù)必定非常多這就是傳說(shuō)中的 簡(jiǎn)述 緣起 模塊通常是指編程語(yǔ)言所提供的代碼組織機(jī)制,利用此機(jī)制可將程序拆解為獨(dú)立且通用的代碼單元。 模塊化主要是解決代碼分割、作用域隔離、模塊之間的依賴(lài)管理以及發(fā)布到生產(chǎn)環(huán)境時(shí)的自動(dòng)化打包與處理等多個(gè)方面...

    MorePainMoreGain 評(píng)論0 收藏0
  • 使用vue開(kāi)發(fā)移動(dòng)端管理后臺(tái)

    摘要:獨(dú)立完成一個(gè)移動(dòng)端項(xiàng)目不是很明白為何會(huì)有這樣的商品管理后臺(tái),還是有些經(jīng)驗(yàn)不足,包括對(duì)產(chǎn)品的全局思考,對(duì)插件的選擇等,都有考慮不周的缺點(diǎn),導(dǎo)致自己中途想換圖形界面插件,浪費(fèi)了點(diǎn)時(shí)間,這里記錄下,總結(jié)下經(jīng)驗(yàn),理一下思路。 獨(dú)立完成一個(gè)移動(dòng)端項(xiàng)目(不是很明白為何會(huì)有這樣的商品管理后臺(tái)),還是有些經(jīng)驗(yàn)不足,包括對(duì)產(chǎn)品的全局思考,對(duì)插件的選擇等,都有考慮不周的缺點(diǎn),導(dǎo)致自己中途想換圖形界面插件,...

    simpleapples 評(píng)論0 收藏0
  • 2019年前端面試題-03

    摘要:前端示例服務(wù)器端代碼可靠的實(shí)例添加回調(diào)函數(shù)拼接傳遞的是一個(gè)匿名的回調(diào)函數(shù),要執(zhí)行的話(huà),暴露為一個(gè)全局方法出錯(cuò)處理使用示例歡迎閱讀年前端面試題年前端面試題年前端筆試題我是,年輕的前端攻城獅一枚,愛(ài)專(zhuān)研,愛(ài)技術(shù),愛(ài)分享。 let與var的區(qū)別? Let為ES6新添加申明變量的命令,它類(lèi)似于var,但是有以下不同: 1、var聲明的變量,其作用域?yàn)樵撜Z(yǔ)句所在的函數(shù)內(nèi),且存在變量提...

    王巖威 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<