web和webApp如何显示第三方网页链接

来源：互联网发布：格式转换器 mac 编辑：程序博客网时间：2024/06/05 10:34

web开发和App开发中经常会有，a标签的链接跳转到第三方网站的现象。

如果直接跳转到第三方网站，无法控制页面的前进与回退到原平台。

如何在本网站或本App打开第三方网页链接。

实现思路：

1.编译一个显示第三方网站的链接的html

2.html中网页中放置一个iframe用于显示第三方网页，获取link参数，赋值到iframe元素显示第三方链接网页。

3通过js动态修改第三方链接网页所有a元素的href
属性，指向跳转到显示第三方网站的链接的html，并将要跳转的第三方链接url作为link参数传入。

实现效果：

实现代码：

newDetail.html:

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />    <link rel="stylesheet" type="text/css" href="http://at.alicdn.com/t/font_iwwlmmalrznkx1or.css">    <link rel="stylesheet" type="text/css" href="http://at.alicdn.com/t/font_306555_7a99p45etlkrzfr.css">    <link rel="stylesheet" type="text/css" href="css/newDetail.css">    <script type="text/javascript" src="js/utils/jquery.js"></script>    <script type="text/javascript" src="js/utils/utils.js"></script>    <script type="text/javascript" src="js/newDetail.js"></script></head><body>        <div class="head" >            <span class="back-icon iconfont icon-xiaoyuhao" style="z-index: -1;"></span>            newDetail             </div>        <iFrame id="newIframe" src="" class="newIframe"  scrolling="no">        </iFrame></body></html>

newDetail.js:

/** * Created by Administrator on 2017/10/6. */window.onload=function () {    //设置ifame src    setIfsameSrc();   //goback    goBack();        //初始化第三方网页的跳转链接    setTimeout(initWebSite,2000);}function goBack() {    var backicon=document.getElementsByClassName("back-icon")[0];    backicon.onclick=function () {//      window.location.href="newList.html";window.history.go(-1);    }}function setIfsameSrc() {//  alert(getParamsId("link"));    var newIframe=document.getElementById("newIframe");    newIframe.src=getParamsId("link");}function initWebSite(){var doc = document.getElementById("newIframe").contentDocument; var aTags=doc.getElementsByTagName("a");//alert(aTags.length);for(var i=0;i<aTags.length;i++){aTags[i].href="newDetail.html?link="+aTags[i].href;}}

newList.js:

 newList.innerHTML=newList.innerHTML                    +'<a class="newItem" style="border-bottom: 1px solid grey" href="newDetail.html?link='+value.link+'">'                    +'<div class="itemUp">'                    +'<span class="abstract" >'+value.abstract+'</span>'                    +'<span class="source" >'+value.publication_time+'</span>'                    +'<div class="clear"></div>'                    +'</div>'                    +'<div class="itemDown" >'                    +'<span class="author"  >'+authorStr+'</span>'                    +'<span class="publication_time"   >'+value.title+'</span>'                    +'<div class="clear"></div>'                    +'</div>'                    +'<div class="itemLine" ></div>'                    +'</a>';

阅读全文

0 0