vue:aリンクをクリックしてネストされたiframeのページをジャンプ

4372 ワード

バックグラウンドから与えられたhtml文字列、v-htmlがレンダリングされ(左1)、ユーザーがリンクをクリックしてiframeネストの下に置かれた新しいページ
考え方1:すべてのaラベルの追加を検索するοnclick="consoel.log(1234567);return false;"または@click.prevent=“consoel.log(1234567);return false;”
      let html = this.$route.query.content
      // 1.    a     
      var index = html.indexOf('//  が  される  
var num=0//この  が れる  
var arr = []
while (index !== -1) {
console.log(index)/     が  される  
arr.push(index)
num++//  ごとに1   
index = html.indexOf(',index+1)//   が れる  の の  から  を  
}
console.log(num)
// 2.バインドイベントの  
// console.log('fは  で'+num+' ')が れた。
for (var i = 0; i < arr.length; i++) {
console.log(arr[i])
// Vue._router.push({ path: "infoDetail2", query: { url: "" } })
this.insertStr(html, arr[i] + 2, ' οnclick="consoel.log(1234567);return false;"')
}
this.html = html

後でonclickが解析されていないので実行できないことに気づきました(実は私は不思議ですが、普通のhtmlページで実行できます.v-htmlレンダリングと関係があるかもしれません)
< a href=“https://www.baidu.com” οnclick="console.log(‘実行するコード’);return false">baidu
考え方2:考え方を変えて、v-htmlにクリックイベントを追加して、指定要素(aラベル)に処理します
<div v-html="html" @click.prevent="clickFn"></div>
    clickFn (event) {
      console.dir(event.target) // testssss
      console.log(event.target.nodeName) // p
      if (event.target.nodeName === 'A') {
        //            
        let href = event.target.href
        this.$router.push({
          path: 'infoDetail2',
          query: {
            src: href
          }
        })
      }
    }