pc端引入微信公众号文章

时间：2023-03-09 20:29:13
pc端引入微信公众号文章

最近做了一个小需求，结果坑特别多。。。。。

需求是这样的，要给公司内部做一个微信公众号广告投票系统，整个项目就不多赘述了，有个小功能，要求是这样的：

点击某条记录后的“投票”按钮，在当前页面弹出弹窗显示文章内容（读取文章url，需要正确展示文字、图片、排版等），保持3分钟，这期间在当前页面上不可进行任何操作，不可投票也不可关闭文章。3分钟后，文章下方的投票区域可用，点击“提交”按钮时，校验所有项目是否都已选择，如果没有，则弹窗提示。提交完成后，状态更改为“已投票”（只是针对该用户，不针对该公众号信息的记录）

pc端引入微信公众号文章

这个小功能很简单，结果遇到了很多坑点

首先是微信公众号地址跨域了（第一个问题。。。。。）

pc端引入微信公众号文章

解决这个问题，使用了ajax解决的，使用了一个第三方的跨域api代码如下：

//解决微信公众号文章的跨域问题

        $.ajaxPrefilter( function (options) {

            if (options.crossDomain && jQuery.support.cors) {

                var http = (window.location.protocol === 'http:' ? 'http:' : 'https:');

                options.url = http + '//cors-anywhere.herokuapp.com/' + options.url;

            }

        });

        $.get(

            articleUrl,

            function (response) {

                var innerHtml = response;

                $('.article-box').html('<div class="article-code-box">' + innerHtml + '</div>')//解决微信公众号文章图片的防盗链问题

                innerHtml = innerHtml.replace(/data-src/g, "src")

                innerHtml = innerHtml.replace(/(wx_fmt=gif)|(wx_fmt=png)|(wx_fmt=jpg)|(wx_fmt=jpeg)/g, "")

                $('.article-box').html('<div>' + innerHtml + '</div>')

            }

        );

好了，解决了跨域，使用iframe的时候加载不进去，只能当做div元素嵌套在前端页面上（第二个问题。。。。。）

解决了这个之后，又有新问题微信的公众号文章里的图片，微信加了防盗链，会显示

pc端引入微信公众号文章

然后查了一下发现，是微信给公众号文章加了防盗链，网上有几种解决办法，都比较复杂，经过观察发现，无法正常显示是因为，将图片的真正地址在data-src里，并且在图片的地址后面拼了wx_fmt这个参数，于是是这样解决的，将data-src放入src里，将图片后缀去掉，代码如下：

 //解决微信公众号文章图片的防盗链问题

 innerHtml = innerHtml.replace(/data-src/g, "src")

 innerHtml = innerHtml.replace(/(wx_fmt=gif)|(wx_fmt=png)|(wx_fmt=jpg)|(wx_fmt=jpeg)/g, "")

之后，发现还有坑。。。。。（第三个问题。。。。）发现有的时候，会返回“访问过于频繁，请用微信扫描二维码进行访问”然后一个二维码一句话，document.write

把我的整个页面给覆盖掉了，然后和产品沟通了一下，产品说反正是让投票人看到文章就可以，通过二维码扫描也可以。。

于是我直接将这个页面放在了我的文章div里

innerHtml = innerHtml.replace(/document.write/g, "$('.article-code-box').html")
请求及返回处理代码如下：
        //解决微信公众号文章的跨域问题

        $.ajaxPrefilter( function (options) {

            if (options.crossDomain && jQuery.support.cors) {

                var http = (window.location.protocol === 'http:' ? 'http:' : 'https:');

                options.url = http + '//cors-anywhere.herokuapp.com/' + options.url;

            }

        });

        $.get(

            articleUrl,

            function (response) {

                var innerHtml = response;

                var isChecked = new RegExp("访问过于频繁，请用微信扫描二维码进行访问");

                if(isChecked.test(innerHtml)){

                    //解决请求被微信拦截时的二维码显示

                    innerHtml = innerHtml.replace(/document.write/g, "$('.article-code-box').html")

                    $('.article-box').html('<div class="article-code-box">' + innerHtml + '</div>')

                }else{

                    //解决微信公众号文章图片的防盗链问题

                    innerHtml = innerHtml.replace(/data-src/g, "src")

                    innerHtml = innerHtml.replace(/(wx_fmt=gif)|(wx_fmt=png)|(wx_fmt=jpg)|(wx_fmt=jpeg)/g, "")

                    $('.article-box').html('<div>' + innerHtml + '</div>')

                    $('#js_pc_qr_code').remove()

                }

            }

        );

整个页面的demo如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="referrer" content="never">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>投票</title>

</head>

<style>

  p{margin: }

  .article-loading{

        width: %;

        height:%;

        display: flex;

        justify-content: center;

        align-items: center;

    }

    .article-loading div{

        width: 4px;

        height: 10px;

        background-color: #2894FF;

        display: inline-block;

        margin-left:6px;

        animation:load2 .5s cubic-bezier(0.77, 0.47, 0.64, 0.28) alternate infinite;

        -webkit-animation:load2 .5s cubic-bezier(0.77, 0.47, 0.64, 0.28) alternate infinite;

    }

    .article-loading div:nth-child(){

        animation-delay: -.5s;

    }

    .article-loading div:nth-child(){

        animation-delay: -.4s;

    }

    .article-loading div:nth-child(){

        animation-delay: -.3s;

    }

    .article-loading div:nth-child(){

        animation-delay: -.2s;

    }

    .article-loading div:nth-child(){

        animation-delay: -.1s;

    }

    @keyframes load2{

        from{transform:scaleY();}

        to{transform:scaleY();}

    }

    @-webkit-keyframes load2{

        from{transform:scaleY();}

        to{transform:scaleY();}

    }

  .vote-out-box{

        /* display: flex; */

        display: none;

        position: fixed;

        top: ;

        right: ;

        bottom: ;

        left: ;

        height: %;

        width: %;

        z-index: ;

        background-color: rgba(, , , 0.65);

        justify-content: center;

        align-items: center;

    }

    .vote-con-box{

        display: flex;

        justify-content: center;

        align-items: center;

        flex-direction: column;

        width: %;

        height: %;

        background-color: #fff;

        background-clip: padding-box;

        border: ;

        border-radius: 4px;

        box-shadow:  4px 12px rgba(, , , 0.15);

        padding: 5px;

        z-index: ;

    }

    .article-box{

        width: %;

        flex:;

        text-align: center;

        position: relative;

        overflow-y: scroll;

        overflow-x: hidden;

    }

    .article-code-box{

        width: %;

        height: %;

        display: flex;

        justify-content: center;

        align-items: center;

    }

    .plase-finash-vote-box{

        width: %;

        height: %;

        display: flex;

        justify-content: center;

        align-items: center;

    }

    .plase-finash-vote{

        width: %;

        height: 50px;

        line-height: 50px;

        font-size: 20px;

        text-align: center;

    }

    .vote-list-box{

        width: %;

        height: 104px;

        margin: 10px auto 5px;

        border: 1px solid #;

        overflow: hidden;

    }

    .vote-list-box .vote-list-con{

        border-top: 1px solid #;

        height: 20px;

        display: flex;

    }

    .vote-list-box .vote-list-first{

        border-top: none;

    }

    .vote-left-menu{

        width: %;

        line-height: 20px;

        border-right: 1px solid #;

        padding: 5px;

        color: #;

    }

    .vote-right-select{

        display: flex;

        justify-content: center;

        align-items: center;

    }

    .put-Vote{

        width: 100px;

        height: 30px;

        background: #2894FF;

        line-height: 30px;

        color: #ffffff;

        border-radius: 4px;

        text-align: center;

        margin-bottom: 5px;

        cursor: pointer;

    }

    .get-vote{

        display: block!important;

    }

    /*访问过于频繁时二维码的大小*/

    .qrcheck_img{

        width: 300px;!important;

        height: 300px;!important;

    }

    .goto-vote{

        width: 100px;

        height: 30px;

        margin: 100px auto;

        background: #2894FF;

        line-height: 30px;

        text-align: center;

        border-radius: 4px;

        color: #ffffff;

    }

</style>

<body>

    <div class='goto-vote'>去投票</div>

    <!-- 投票弹框 -->

    <div class="vote-out-box">

        <ul class="vote-con-box">

            <div class="article-box">

                <div class="article-loading">

                    <div></div>

                    <div></div>

                    <div></div>

                    <div></div>

                    <div></div>

                </div>

            </div>

            <div class="vote-list-box">

                <form class="get-vote">

                    <div class="vote-list-con vote-list-first">

                        <p class="vote-left-menu">文章标题吸引人</p>

                        <div class="vote-right-select">

                            <input type="radio" name="radioOne" value=>1分

                            <input type="radio" name="radioOne" value=>2分

                            <input type="radio" name="radioOne" value=>3分

                            <input type="radio" name="radioOne" value=>4分

                            <input type="radio" name="radioOne" value=>5分

                        </div>

                    </div>

                    <div class="vote-list-con">

                            <p class="vote-left-menu">文章标题和内容匹配</p>

                            <div class="vote-right-select">

                                <input type="radio" name="radioTwo" value=>1分

                                <input type="radio" name="radioTwo" value=>2分

                                <input type="radio" name="radioTwo" value=>3分

                                <input type="radio" name="radioTwo" value=>4分

                                <input type="radio" name="radioTwo" value=>5分

                            </div>

                    </div>

                    <div class="vote-list-con">

                            <p class="vote-left-menu">看完文章想要转发</p>

                            <div class="vote-right-select">

                                <input type="radio" name="radioThree" value=>1分

                                <input type="radio" name="radioThree" value=>2分

                                <input type="radio" name="radioThree" value=>3分

                                <input type="radio" name="radioThree" value=>4分

                                <input type="radio" name="radioThree" value=>5分

                            </div>

                    </div>

                    <div class="vote-list-con">

                            <p class="vote-left-menu">看完文章想要点赞</p>

                            <div class="vote-right-select">

                                <input type="radio" name="radioFour" value=>1分

                                <input type="radio" name="radioFour" value=>2分

                                <input type="radio" name="radioFour" value=>3分

                                <input type="radio" name="radioFour" value=>4分

                                <input type="radio" name="radioFour" value=>5分

                            </div>

                    </div>

                    <div class="vote-list-con">

                            <p class="vote-left-menu">总的来说，觉得这篇文章好看</p>

                            <div class="vote-right-select">

                                <input type="radio" name="radioFive" value=>1分

                                <input type="radio" name="radioFive" value=>2分

                                <input type="radio" name="radioFive" value=>3分

                                <input type="radio" name="radioFive" value=>4分

                                <input type="radio" name="radioFive" value=>5分

                            </div>

                    </div>

                </form>

            </div>

            <div class="put-Vote">提交投票</div>

        </div>

    </div>

</body>

</html>

<script type="text/javascript" src="https://cdn.11bee.com/scripts/static/js/jquery-3.0.0.min.js"></script>

<script type="text/javascript">

    var voteContentId=[

        {normName:'文章标题吸引人'},

        {normName:'文章标题和内容匹配'},

        {normName:'看完文章想要转发'},

        {normName:'看完文章想要点赞'},

        {normName:'总的来说，觉得这篇文章好看'},

    ]

    //文章加载完成3分钟后需要进行的操作

    function isUseable(cbk){

        timer=setTimeout(function () {

            $('.article-box').html('<div class="plase-finash-vote-box"><p class="plase-finash-vote">请完成投票</p></div>')

            $('.vote-list-box input').removeAttr("disabled");

            $('.put-Vote').off()

            $('.put-Vote').on('click',function(){

                var selectValue = $(".get-vote").serializeArray();

                //3分钟后投票选项是否全部完成

                if(selectValue.length<){

                    alert('请完成所有投票选项')

                }else{

                    for(var i=;i<selectValue.length;i++){

                        voteContentId[i].id=selectValue[i].name

                        voteContentId[i].score=selectValue[i].value

                    }

                    clearTimeout(timer);

                    $('.vote-out-box').css('display','none');

                    // 提交按钮，提交数据

                    $.ajax({

                        type: "post",

                        url: "/admin/serving/addVoteResult",

                        data: { voteNorms: customerUserName, voteContentId: voteContentId },

                        dataType: "json",

                        async: false,

                        success: function (data) {

                            console.log(data)

                            cbk && cbk

                        }

                    });

                }

            })

        }, );

    }

    //渲染函数

    function voteRender(articleUrl,cbk){

        isUseable(cbk)

        $('.vote-list-box input').attr("disabled","disabled");

        // 未到3分钟时弹窗提示

        $('.put-Vote').on('click',function(){

            alert('您有3分钟的时间阅读文章，请先阅读文章')

        })

        //解决微信公众号文章的跨域问题

        $.ajaxPrefilter( function (options) {

            if (options.crossDomain && jQuery.support.cors) {

                var http = (window.location.protocol === 'http:' ? 'http:' : 'https:');

                options.url = http + '//cors-anywhere.herokuapp.com/' + options.url;

            }

        });

        $.get(

            articleUrl,

            function (response) {

                var innerHtml = response;

                var isChecked = new RegExp("访问过于频繁，请用微信扫描二维码进行访问");

                if(isChecked.test(innerHtml)){

                    //解决请求被微信拦截时的二维码显示

                    innerHtml = innerHtml.replace(/document.write/g, "$('.article-code-box').html")

                    $('.article-box').html('<div class="article-code-box">' + innerHtml + '</div>')

                }else{

                    //解决微信公众号文章图片的防盗链问题

                    innerHtml = innerHtml.replace(/data-src/g, "src")

                    innerHtml = innerHtml.replace(/(wx_fmt=gif)|(wx_fmt=png)|(wx_fmt=jpg)|(wx_fmt=jpeg)/g, "")

                    $('.article-box').html('<div>' + innerHtml + '</div>')

                    $('#js_pc_qr_code').remove()

                }

            }

        );

    }

     //文章的URL

     var articleUrl='https://mp.weixin.qq.com/s?__biz=MzU4MTcyMTM2Mw==&mid=2247485252&idx=1&sn=a760748c5b174ee96c92edc779a5528b&chksm=fd420b38ca35822e2e77f7c7d6f11b5013b54606fcbacbe42abf0ec6cd0b93596f0e2b88131a&scene=0&xtrack=1&key=7f1d049d633b1d67ab8c356a0a47bd7d5e3c526a1e4f6219a1a788ac49e4cc710e2fb869c6eea5600601c386667b75385600c7bf33b4944ae03c7480fd9cd3e7ba310080b1f664396993c4364cc9f804&ascene=1&uin=OTM3NDg5NDQx&devicetype=Windows+10&version=62060833&lang=zh_CN&pass_ticket=CH%2Fn62cerUJDtvxUNSrMPARiIA4WocXX89L%2FzA9w5wKBw8lMxvZTzO1D00A4keTT'

    //点击提交按钮之后的函数，自定义函数

    function cbk(){

    }

    $('.goto-vote').on('click',function(){

        $('.vote-out-box').css('display','flex');

        voteRender(articleUrl,cbk)

    })

</script>

一个简单的小功能做的我好恶心。。。。。。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="referrer" content="never">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>投票</title>
</head>
<style>
p{margin: }
.article-loading{
width: 100%;
height:100%;
display: flex;
justify-content: center;
align-items: center;
}
.article-loading div{
width: 4px;
height: 10px;
background-color: #2894FF;
display: inline-block;
margin-left:6px;
animation:load2 0.5s cubic-bezier(0.77, 0.47, 0.64, 0.28) alternate infinite;
-webkit-animation:load2 0.5s cubic-bezier(0.77, 0.47, 0.64, 0.28) alternate infinite;
}
.article-loading div:nth-child(){
animation-delay: -0.5s;
}
.article-loading div:nth-child(){
animation-delay: -0.4s;
}
.article-loading div:nth-child(){
animation-delay: -0.3s;
}
.article-loading div:nth-child(){
animation-delay: -0.2s;
}
.article-loading div:nth-child(){
animation-delay: -0.1s;
}
@keyframes load2{
from{transform:scaleY();}
to{transform:scaleY();}
}
@-webkit-keyframes load2{
from{transform:scaleY();}
to{transform:scaleY();}
}
.vote-out-box{
/* display: flex; */
display: none;
position: fixed;
top: ;
right: ;
bottom: ;
left: ;
height: 100%;
width: 100%;
z-index: ;
background-color: rgba(, , , 0.65);
justify-content: center;
align-items: center;
}
.vote-con-box{
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
width: 50%;
height: 95%;
background-color: #fff;
background-clip: padding-box;
border: ;
border-radius: 4px;
box-shadow: 4px 12px rgba(, , , 0.15);
padding: 5px;
z-index: ;
}
.article-box{
width: 100%;
flex:;
text-align: center;
position: relative;
overflow-y: scroll;
overflow-x: hidden;
}
.article-code-box{
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.plase-finash-vote-box{
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.plase-finash-vote{
width: 100%;
height: 50px;
line-height: 50px;
font-size: 20px;
text-align: center;
}
.vote-list-box{
width: 80%;
height: 104px;
margin: 10px auto 5px;
border: 1px solid #333333;
overflow: hidden;
}
.vote-list-box .vote-list-con{
border-top: 1px solid #333333;
height: 20px;
display: flex;
}
.vote-list-box .vote-list-first{
border-top: none;
}
.vote-left-menu{
width: 45%;
line-height: 20px;
border-right: 1px solid #333333;
padding: 5px;
color: #333333;
}
.vote-right-select{
display: flex;
justify-content: center;
align-items: center;
}
.put-Vote{
width: 100px;
height: 30px;
background: #2894FF;
line-height: 30px;
color: #ffffff;
border-radius: 4px;
text-align: center;
margin-bottom: 5px;
cursor: pointer;
}
.get-vote{
display: block!important;
}
/*访问过于频繁时二维码的大小*/
.qrcheck_img{
width: 300px;!important;
height: 300px;!important;
}
.goto-vote{
width: 100px;
height: 30px;
margin: 100px auto;
background: #2894FF;
line-height: 30px;
text-align: center;
border-radius: 4px;
color: #ffffff;
}
</style>
<body>
<div class='goto-vote'>去投票</div>
<!-- 投票弹框 -->
<div class="vote-out-box">
<ul class="vote-con-box">
<div class="article-box">
<div class="article-loading">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
<div class="vote-list-box">
<form class="get-vote">
<div class="vote-list-con vote-list-first">
<p class="vote-left-menu">文章标题吸引人</p>
<div class="vote-right-select">
<input type="radio" name="radioOne" value=>1分
<input type="radio" name="radioOne" value=>2分
<input type="radio" name="radioOne" value=>3分
<input type="radio" name="radioOne" value=>4分
<input type="radio" name="radioOne" value=>5分
</div>
</div>
<div class="vote-list-con">
<p class="vote-left-menu">文章标题和内容匹配</p>
<div class="vote-right-select">
<input type="radio" name="radioTwo" value=>1分
<input type="radio" name="radioTwo" value=>2分
<input type="radio" name="radioTwo" value=>3分
<input type="radio" name="radioTwo" value=>4分
<input type="radio" name="radioTwo" value=>5分
</div>
</div>
<div class="vote-list-con">
<p class="vote-left-menu">看完文章想要转发</p>
<div class="vote-right-select">
<input type="radio" name="radioThree" value=>1分
<input type="radio" name="radioThree" value=>2分
<input type="radio" name="radioThree" value=>3分
<input type="radio" name="radioThree" value=>4分
<input type="radio" name="radioThree" value=>5分
</div>
</div>
<div class="vote-list-con">
<p class="vote-left-menu">看完文章想要点赞</p>
<div class="vote-right-select">
<input type="radio" name="radioFour" value=>1分
<input type="radio" name="radioFour" value=>2分
<input type="radio" name="radioFour" value=>3分
<input type="radio" name="radioFour" value=>4分
<input type="radio" name="radioFour" value=>5分
</div>
</div>
<div class="vote-list-con">
<p class="vote-left-menu">总的来说，觉得这篇文章好看</p>
<div class="vote-right-select">
<input type="radio" name="radioFive" value=>1分
<input type="radio" name="radioFive" value=>2分
<input type="radio" name="radioFive" value=>3分
<input type="radio" name="radioFive" value=>4分
<input type="radio" name="radioFive" value=>5分
</div>
</div>
</form>
</div>
<div class="put-Vote">提交投票</div>
</div>
</div>
</body>
</html>
<script type="text/javascript" src="https://cdn.11bee.com/scripts/static/js/jquery-3.0.0.min.js"></script>
<script type="text/javascript">
var voteContentId=[
{normName:'文章标题吸引人'},
{normName:'文章标题和内容匹配'},
{normName:'看完文章想要转发'},
{normName:'看完文章想要点赞'},
{normName:'总的来说，觉得这篇文章好看'},
]
//文章加载完成3分钟后需要进行的操作
function isUseable(cbk){
timer=setTimeout(function () {
$('.article-box').html('<div class="plase-finash-vote-box"><p class="plase-finash-vote">请完成投票</p></div>')
$('.vote-list-box input').removeAttr("disabled");
$('.put-Vote').off()
$('.put-Vote').on('click',function(){
var selectValue = $(".get-vote").serializeArray();
//3分钟后投票选项是否全部完成
if(selectValue.length<){
alert('请完成所有投票选项')
}else{
for(var i=;i<selectValue.length;i++){
voteContentId[i].id=selectValue[i].name
voteContentId[i].score=selectValue[i].value
}
clearTimeout(timer);
$('.vote-out-box').css('display','none');
// 提交按钮，提交数据
$.ajax({
type: "post",
url: "/admin/serving/addVoteResult",
data: { voteNorms: customerUserName, voteContentId: voteContentId },
dataType: "json",
async: false,
success: function (data) {
console.log(data)
cbk && cbk
}
});
}
})
}, );
}
//渲染函数
function voteRender(articleUrl,cbk){
isUseable(cbk)
$('.vote-list-box input').attr("disabled","disabled");
// 未到3分钟时弹窗提示
$('.put-Vote').on('click',function(){
alert('您有3分钟的时间阅读文章，请先阅读文章')
})
//解决微信公众号文章的跨域问题
$.ajaxPrefilter( function (options) {
if (options.crossDomain && jQuery.support.cors) {
var http = (window.location.protocol === 'http:' ? 'http:' : 'https:');
options.url = http + '//cors-anywhere.herokuapp.com/' + options.url;
}
});
$.get(
articleUrl,
function (response) {
var innerHtml = response;
var isChecked = new RegExp("访问过于频繁，请用微信扫描二维码进行访问");
if(isChecked.test(innerHtml)){
//解决请求被微信拦截时的二维码显示
innerHtml = innerHtml.replace(/document.write/g, "$('.article-code-box').html")
$('.article-box').html('<div class="article-code-box">' + innerHtml + '</div>')
}else{
//解决微信公众号文章图片的防盗链问题
innerHtml = innerHtml.replace(/data-src/g, "src")
innerHtml = innerHtml.replace(/(wx_fmt=gif)|(wx_fmt=png)|(wx_fmt=jpg)|(wx_fmt=jpeg)/g, "")
$('.article-box').html('<div>' + innerHtml + '</div>')
$('#js_pc_qr_code').remove()
}
}
);
}
//文章的URL
var articleUrl='https://mp.weixin.qq.com/s?__biz=MzU4MTcyMTM2Mw==&mid=2247485252&idx=1&sn=a760748c5b174ee96c92edc779a5528b&chksm=fd420b38ca35822e2e77f7c7d6f11b5013b54606fcbacbe42abf0ec6cd0b93596f0e2b88131a&scene=0&xtrack=1&key=7f1d049d633b1d67ab8c356a0a47bd7d5e3c526a1e4f6219a1a788ac49e4cc710e2fb869c6eea5600601c386667b75385600c7bf33b4944ae03c7480fd9cd3e7ba310080b1f664396993c4364cc9f804&ascene=1&uin=OTM3NDg5NDQx&devicetype=Windows+10&version=62060833&lang=zh_CN&pass_ticket=CH%2Fn62cerUJDtvxUNSrMPARiIA4WocXX89L%2FzA9w5wKBw8lMxvZTzO1D00A4keTT'
//点击提交按钮之后的函数，自定义函数
function cbk(){
}
$('.goto-vote').on('click',function(){
$('.vote-out-box').css('display','flex');
voteRender(articleUrl,cbk)
})
</script>