vue:aリンクをクリックしてネストされたiframeのページをジャンプ
4372 ワード
バックグラウンドから与えられたhtml文字列、v-htmlがレンダリングされ(左1)、ユーザーがリンクをクリックしてiframeネストの下に置かれた新しいページ
考え方1:すべてのaラベルの追加を検索するοnclick="consoel.log(1234567);return false;"または@click.prevent=“consoel.log(1234567);return false;”
後でonclickが解析されていないので実行できないことに気づきました(実は私は不思議ですが、普通のhtmlページで実行できます.v-htmlレンダリングと関係があるかもしれません)
< a href=“https://www.baidu.com” οnclick="console.log(‘実行するコード’);return false">baidu
考え方2:考え方を変えて、v-htmlにクリックイベントを追加して、指定要素(aラベル)に処理します
考え方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
}
})
}
}