앞부분과 뒷부분이 분리되어 있으며, 뒷부분이 인터페이스를 제공합니다. 그러나 제품 설명 파일을 비교하는 일부 데이터는 다른 서버에 저장됩니다. 따라서 페이지가 표시될 때 이 설명 파일이 페이지에 인라인 형태로 표시되면 됩니다. 원하는 효과를 얻으려면 뭔가를 수행해야 합니다. 이번 글에서는 주로 VUE 페이지에서 외부 HTML을 로딩하기 위한 샘플 코드를 소개합니다. 편집자 입장에서는 꽤 좋다고 생각해서 지금부터 공유하고 참고용으로 올려드리겠습니다. 편집자를 따라가서 모두에게 도움이 되기를 바랍니다.
이전 IFRAME 태그와 달리 해당 방법은 상대적으로 낮은 수준이며 다른 버그가 있습니다.
이 글의 아이디어는 HTML 요청을 v-html 형식으로 페이지에 로드하는 것입니다. 전역 구성 요소 등록 [v-html-panel]
1.HtmlPanel.vue 파일
<template> <p> <mu-circular-progress :size="40" v-if="loading"/> <p v-html="html"></p> </p> </template> <style> </style> <script> export default{ // 使用时请使用 :url.sync=""传值 props: { url: { required: true } }, data () { return { loading: false, html: '' } }, watch: { url (value) { this.load(value) } }, mounted () { this.load(this.url) }, methods: { load (url) { if (url && url.length > 0) { // 加载中 this.loading = true let param = { accept: 'text/html, text/plain' } this.$http.get(url, param).then((response) => { this.loading = false // 处理HTML显示 this.html = response.data }).catch(() => { this.loading = false this.html = '加载失败' }) } } } } </script>
htmlViewSample.vue
<template> <p> <v-html-panel :url.asyc="url1"></v-html-panel> <v-html-panel :url.asyc="url2"></v-html-panel> </p> </template> <style scoped> p{color:red} </style> <script> export default{ data () { return { url1: '', url2: '' } }, mounted () { this.url1 = 'http://file.xxx.com/group1/M00/0C/F5/xxxxxxxx.html' this.url2 = 'http://file.xxx.com/group1/M00/0D/3B/yyyyyyy.html' }, methods: { } } </script>
이전 렌더링
참고:
크로스 도메인을 처리해야 하는 GET 요청을 처리하기 위해 axios를 직접 사용합니다.
외부 CSS 스타일이 표시되는 HTML에 영향을 줍니다
동시에 로드된 외부 HTML의 스크립트도 실행될 수 있습니다. 필요합니다. 요청 시 처리됩니다.
외부 HTML 파일 내부의 상대 경로는 자동으로 인식되지 않습니다. 절대 경로는
NGINX 교차 도메인 구성:
일 수 있습니다(Origin이 *를 사용하는 경우에는 보안이 걱정된다면 if+regular 조건을 이용해 판단하시면 됩니다.)
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; ... }
관련 추천 :
자세히 jQuery에서 외부 CSS 파일을 로드하는 방법에 대한 설명
jquery 지연 로딩 외부 js 구현 code_jquery
위 내용은 VUE 페이지는 외부 HTML 메소드 로딩을 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!