0

I am developing a widget. the code for it is :

<script type="text/javascript">
    var hashgurus_woeid = 1;
</script>
<script src="../feed/livetrend.js"></script>

livetrend.js contains:

var _html = '<div id="FJ_TF_Cont" style="position: relative; padding: 20px; margin: 20px; border-width: 0px; width: 200px;">'
+ '<iframe width="210" height="640" src="../feed/default.aspx?woeid=' + hashgurus_woeid +'" ' 
+ 'name="FJIframe" scrolling="no" frameborder="0" marginwidth="0" marginheight="0" style="width: 210px; border-width: 0px; z-index: 1;">'
+ '</iframe>'
+ '</div>';

document.write(_html);

test html page:

I created a test html page and put the widget in it. It perfectly works. Now the whole problem is when i add the async attribute. i donot see any output.

<script type="text/javascript">
    var hashgurus_woeid = 1;
</script>
<script async src="../feed/livetrend.js"></script>

what is the problem ? is it because of the document.write ?

Improve this question
5
  • 2
    "is it because of the document.write ?" Yes, exactly. Don't use document.write. Commented Feb 15, 2015 at 20:19
  • what should i do? what is the solution. I want to use async attribute. how will i rewrite my livetrend.js then? I am clueless Commented Feb 15, 2015 at 20:26
  • 1
    Why do you want to use async? Commented Feb 15, 2015 at 20:30
  • cause, I am making the widget go live and it may be used by many. I dont want my code to choke others program. I want my code to load async. Commented Feb 15, 2015 at 20:36
  • See also: async loading javascript with document.write Commented Feb 15, 2015 at 23:05

1 Answer 1

Reset to default
1

document.write cannot be called from an asynchronous script. Use a regular script and an asynchronous injection of the HTML instead, e.g.

var div = document.createElement('div');
div.id = "FJ_TF_Cont";
div.style.position = 'relative';
div.style.padding = '20px';
div.style.margin = '20px';
div.style.borderWidth = 0;
div.style.width = '200px';
var div.innerHTML = '<iframe width="210" height="640" src="../feed/default.aspx?woeid=' + hashgurus_woeid +'" ' 
+ 'name="FJIframe" scrolling="no" frameborder="0" marginwidth="0" marginheight="0" style="width: 210px; border-width: 0px; z-index: 1;">'
+ '</iframe>';

document.body.appendChild(div);

If you want to insert at the point of the script, you can use:

HTML -

<script async data-hashgurus-woeid="1" id="live-trend-widget" src="../feed/livetrend.js"></script>

Javascript-

var liveTrendWidget = document.getElementById('live-trend-widget');

var hashGurusWoeId = liveTrendWidget.getAttribute("data-hashgurus-woeid");

var widgetDiv = document.createElement('div');
widgetDiv.id = "FJ_TF_Cont";
widgetDiv.style.position = 'relative';
widgetDiv.style.padding = '20px';
widgetDiv.style.margin = '20px';
widgetDiv.style.borderWidth = 0;
widgetDiv.style.width = '200px';
widgetDiv.innerHTML = '<iframe width="210" height="640" src="../feed/default.aspx?woeid=' + hashGurusWoeId +'" ' 
+ 'name="FJIframe" scrolling="no" frameborder="0" marginwidth="0" marginheight="0" style="width: 210px; border-width: 0px; z-index: 1;">'
+ '</iframe>';

// Inserts BEFORE the script element
liveTrendWidget.parentElement.insertBefore(widgetDiv, liveTrendWidget);

// *** OR ***

// Inserts AFTER the script element
liveTrendWidget.parentElement.insertBefore(widgetDiv, liveTrendWidget.nextSibling);

See getAttribute method and insertBefore method.

Improve this answer
Sign up to request clarification or add additional context in comments.

13 Comments

thanks. document.body.appendChild(div) - where will this append? I want this exactly where i called the <script src="../feed/livetrend.js"></script>
Updated the answer to address your comment.
i still have to remove my async to make this work. otherwise it adds it to the bottom. :-( may be because of async it finishes processing last and so it adds to the last of the page?
@SatyaShot If you want this to append at a particular point - is there an element you can use to place it adjacent to or inside? Or is it literally going within the body element and has no sibling elements?
this is like an sort of a widget, any body can insert this piece of code anywhere they want. this is the widget := <script type="text/javascript"> var hashgurus_woeid = 1; </script> <script async src="../feed/livetrend.js"></script>
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.