2013-05-06 2 views
-1

Привет всем Я хочу, чтобы document.write изображение гиперссылки внутри getjson Я пробовал следующее, но он не работает. не могли бы вы, ребята, сказать мне, что не так с моим документом?Как document.write изображение гиперссылки внутри getjson?

<script> 
$.getJSON('http://anyorigin.com/get?url=http://www.somesite.com/handelit.ashx&callback=?', function(data){ 
     var siteContents = data.contents;  
     //writes to textarea 
     document.myform.outputtext.value = siteContents ; 
     document.write("<a id="ok" href="http://www.mysite.com/master.m3u8?+siteContents+"><img src="./playicon.jpg"></a>"); 

    }); 
</script> 
+0

Есть ли у вас какие-либо ошибки в консоли? 404 сделает обратный вызов на самом деле никогда не вызываемым – Brewal

+1

Я рекомендую потратить час на чтение [документации API jQuery] (http://api.jquery.com) от начала до конца. Это занимает всего час, и он показывает вам, как делать фундаментальные вещи, такие как взаимодействие с DOM после загрузки страницы. –

ответ

3

Привет всем я хочу document.write гиперссылку на изображение внутри getjson

Вы не можете (не разумно *). document.write работает только во время начального разбора страницы. Если вы используете его после завершения загрузки страницы, он полностью заменяет страницу.

Вместо этого взаимодействуйте с DOM. Несколько способов сделать это, но наиболее очевидным на основе кода, чтобы иметь якорь первоначально скрыт, а затем показать его после заполнения в текстовой области, как это:

$("#ok").show(); 

Полный пример: Live Copy | Live Source

(я изменил playicon.jpg на свой Gravatar, так как в противном случае это показывает, как сломанный изображение на JSBin)

<!DOCTYPE html> 
<html> 
<head> 
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
<meta charset=utf-8 /> 
<title>JS Bin</title> 
</head> 
<body> 
    <form name="myform"> 
    <textarea name="outputtext"></textarea> 
    </form> 
    <a id="ok" style="display: none" href="http://www.mysite.com/master.m3u8?+siteContents+"><img src="http://www.gravatar.com/avatar/f69cfb4677f123381231f97ea1138f8a?s=32&d=identicon&r=PG"></a> 
    <script> 
    (function($) { 
     $.getJSON('http://anyorigin.com/get?url=http://www.somesite.com/handelit.ashx&callback=?', function(data){ 
     var siteContents = data.contents;  
     //writes to textarea 
     document.myform.outputtext.value = siteContents; 
     // shows the link 
     $("#ok").show(); 
     }); 
    })(jQuery); 
    </script> 
</body> 
</html> 

* "не разумно": IF ваш контент поступает из того же источника, что и документ (он не похож на него), вы можете сделать это с помощью синхронного вызова ajax. Но это будет очень плохой дизайн.

+0

спасибо за ответ. моя главная цель - изменить часть значения href с переменной sitecontent. Как я могу это сделать? Я получаю ответ от getjson, поскольку он отображает его в textarea! Я попробовал document.getElementById ("ok"). innerHTML = siteContents; но он изменяет гиперссылку url и изображение гиперссылки не показывает! – user1788736

+0

@ user1788736: Вы имеете в виду 'href' на якоре? Вы используете [функцию attr] (http://api.jquery.com/attr) (или [функцию 'prop'] (http://api.jquery.com/prop) в этом * конкретном * случай они в основном делают то же самое). –

+1

'$ ('#ok') .attr ('href', 'http: //www.mysite.com/master.m3u8?' + SiteContents);' – Brewal

0

Пожалуйста, используйте createElement вместо document.write

$.getJSON('http://anyorigin.com/get?url=http://www.somesite.com/handelit.ashx&callback=?', function(data){ 
     var siteContents = data.contents;  
     //writes to textarea 
     document.myform.outputtext.value = siteContents ; 

     //Create A-Element 
     var link = document.createElement('a'); 
     link.setAttribute('href', 'http://www.mysite.com/master.m3u8?' + encodeURIComponent(siteContents)); 
     link.id = 'ok'; 

     //Append A-Element to your FORM-Element 
     var myForm = document.getElementsByTagName('form')[0]; 
     myForm.appendChild(link); 

     //Create IMG-Element 
     var img = document.createElement('img'); 
     img.setAttribute('src', './playicon.jpg'); 

     //Append IMG-Element to A-Element (id='ok') 
     link.appendChild(img); 
    }); 
Смежные вопросы