图像不能在附加的html中渲染

时间:2014-11-20 05:00:03

标签: javascript jquery html image

我从API那样得到回复(这是其中的一部分)

{
    "Content": "<span class="PubAPIAd"><script type="text/javascript" src="http://ru.gwallet.com/r1/ad/MTAuMTAyLjIuNzQgODg4OA==/c366792T246999B22980F24848R13t2?data=zmxnsak48w9msqkeq9hbz4dja7u4sstqxoircsqutictr7inboxhwujhu8n1c9scn5t53xs396h6re6nz4u1a1brbnmzzxjt7qy8difcdkgk9g34ngknd9qky7w5udgzrhm64h74abbpyh47djbgb5acp3f1ghb1kfeysy716j133gqhydk3au6ydj8h14aztefkrjfp7fj3mqj54sntbrhosseh397g7g7ns75ja3rhwcq9gzao5m6g8h9zph5sckzeoahibtru5cbda7bpcfmrra&auction_price=0.05"></script></span>  <img src="http://aktrack.pubmatic.com/AdServer/AdDisplayTrackerServlet?operId=1&pubId=51762&siteId=51766&adId=95947&adServerId=243&kefact=0.050000&kaxefact=0.050000&kadNetFrequecy=1&kadwidth=320&kadheight=50&kadsizeid=31&kltstamp=1416004675&indirectAdId=0&adServerOptimizerId=2&ranreq=0.05247270006223126&kpbmtpfact=0.050000&dcId=2&tldId=80779&passback=0&imprId=139A6406-07A0-4DD1-8B76-81C35E5EA412&mobflag=1&ismobileapp=1&modelid=604&osid=7&udidtype=0&campaignId=6575&creativeId=0&pctr=0.000000&wDSPByrId=11&imprCap=1&pageURL=http%3A%2F%2Fatt_1617ee24-7ff6-4402-9e8b-77dcb53f880f.com" width="1" height="1" />" 
}

我正在尝试使用Jquery append或js innerHTML将“内容”附加到我的网页上的div以显示广告。但是我看不到图像。

document.getElementById('myDiv').innerHTML = response.Content;

但是,如果我将其硬编码到我的HTML中,首先会显示图像。

真的想知道为什么会这样,以及我如何解决它

注意:我无法控制后端。此图片也是我要加载的广告,因此请停用广告拦截器以尝试查看。

编辑:这是在控制台中看到的

Resource interpreted as Image but transferred with MIME type text/html: "http://aktrack.pubmatic.com/AdServer/AdDisplayTrackerServlet?operId=1&pubId…mprCap=1&pageURL=http%3A%2F%2Fatt_1617ee24-7ff6-4402-9e8b-77dcb53f880f.com". 

编辑2:以下是硬编码的示例(正确渲染的地方)。需要停用广告拦截器才能查看 - &gt; http://jsfiddle.net/0z1cybrf/

1 个答案:

答案 0 :(得分:0)

我假设response.Content返回您要插入html的{​​{1}}。在这种情况下,您可以简单地使用jQuery。

myDiv

Samuel Liew 在评论中指出,你的字符串无效。您可以通过将属性旁边的引号更改为$('#myDiv').append(response.Content); (单引号)来解决此问题。

编辑 - 试试这个:

'

告诉我你是否得到了相同的结果。

###最终编辑###

似乎$('#myDiv').append('<span class="PubAPIAd"><script type="text/javascript" src="http://ru.gwallet.com/r1/ad/MTAuMTAyLjIuNzQgODg4OA==/c366792T246999B22980F24848R13t2?data=yydr8ogr3e5zsn1cacgexhma83oaf1xzjfyna3mgdwi473hf3wjcwujhu8n1c9scn5t53xs396h6re6nz4u1a1brbnmzzxjt7qy8difcdkgk9g34ngknd9qky7w5udgzrhm64h74abbpyh47djbgb5acp3f1ghb1kfeysy716j133gqhydksc3h869rc47kzse66wx4hpx4uiqj54sntbrhosseh397g7g7ns75ja3rhwcq9gzao5m6g8h9zph5sckzeoahibtru5cbda7bpcfmrra&auction_price=0.05"></script></span><img src="http://aktrack.pubmatic.com/AdServer/AdDisplayTrackerServlet?operId=1&pubId=51762&siteId=51766&adId=95947&adServerId=243&kefact=0.050000&kaxefact=0.050000&kadNetFrequecy=1&kadwidth=320&kadheight=50&kadsizeid=31&kltstamp=1416004779&indirectAdId=0&adServerOptimizerId=2&ranreq=0.20811005185761733&kpbmtpfact=0.050000&dcId=2&tldId=0&passback=0&imprId=E1FB9573-FF52-4CAC-BFE1-92EDBDC23FD2&mobflag=1&ismobileapp=1&modelid=604&osid=7&udidtype=0&campaignId=6575&creativeId=0&pctr=0.000000&wDSPByrId=11&imprCap=1&pageURL=http%3A%2F%2Fatt_1617ee24-7ff6-4402-9e8b-77dcb53f880f.com" width="1" height="1" />'); 标签中的javascript没有执行,这就是图片没有显示的原因。要证明这一点,您可以像以前一样插入script,然后访问Content <script>属性中给出的链接。复制脚本并转到控制台。将代码粘贴到控制台中,然后按Enter键。图像应该显示出来。至少它对我有用。您可以尝试将src标记硬编码到您的html中,因为这不会改变。

HTML代码

script

jQuery代码<html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js" ></script> <script src="functions.js></script> <script type='text/javascript' src='http://ru.gwallet.com/r1/ad/MTAuMTAyLjIuNzQgODg4OA==/c366792T246999B22980F24848R13t2?data=yydr8ogr3e5zsn1cacgexhma83oaf1xzjfyna3mgdwi473hf3wjcwujhu8n1c9scn5t53xs396h6re6nz4u1a1brbnmzzxjt7qy8difcdkgk9g34ngknd9qky7w5udgzrhm64h74abbpyh47djbgb5acp3f1ghb1kfeysy716j133gqhydksc3h869rc47kzse66wx4hpx4uiqj54sntbrhosseh397g7g7ns75ja3rhwcq9gzao5m6g8h9zph5sckzeoahibtru5cbda7bpcfmrra&auction_price=0.05'></script> </head> <body> <DIV id="myDiv" ></DIV> </body> </html>

functions.js