javascript - How to document.write() within an image src string? Doesn't get parsed - Stack Overflow

admin管理员组

文章数量:1391995

This is for a Javascript application that is only intended to run on a local machine, accessing many large image files from local disk.

Original code like this:

<script>
// Constants, var inits, etc.
</script>

<-- Then html stuff including some control buttons, each one like this -->
<img id="pgb_runStop" onclick="click_runStop()" src="buttons/but_run.png">

<--then a chunk of javascript related to the buttons -->

The thing works OK, see .htm

Now I want to extend it, so all image pathnames are defined as js constants and vars. Some will remain fixed during lifetime of the browser page, others will change by user actions. I'm stuck with one part of this. How to get the html parser to pay attention to script blocks WITHIN <img .... > statements?

Specifically, I want to do a document.write() within the image src string.

Like: <img src="<script>document.write(B_PATH)</script>something.png">

This is for the initial page display. The images later get changed by scripts, and that's working OK.

But the html parser doesn't seem to notice scripts inside html elements.

I'm a javascript nubie, so I may have some stupid misconception of how it all works. Am I just doing it wrong, or is this fundamentally impossible due to reasons?

Here's an example:

<script>
// Constants
PGL_BUT_PATH = "buttons/"      // where the button images etc are.
</script>

<-- some html stuff -->

<-- including some control buttons, each one like this -->
<img id="pgb_runStop" onclick="click_runStop()"
src="<script>document.write(PGL_BUT_PATH);</script>but_run.png">

<--then a chunk of javascript related to the buttons -->

In debugger, the img element appears as:

  <img id="pgb_runStop" onclick="click_runStop()"
  src="<script>document.write(PGL_BUT_PATH);</script>but_run.png"/>

The intent was to get this:

  <img id="pgb_runStop" onclick="click_runStop()"
  src="buttons/but_run.png"/>

I could just give up with trying to have the page initially render with the correct buttons, and have js correct them afterwards. I'm just surprised... Isn't it possible to evaluate js constants during initial html parsing to construct the DOM, in this way?

Edit to add: Sorry, I wasn't clear enough in the question. What I want is a way for js to make the html content/DOM correct (per js config values that get defined very early on) BEFORE the page first renders. To avoid any flicker or resizings after first render.

So another solution would be to delay the first page render till after some scripts have run, so they can make initial DOM adjustments before the user sees anything. Any way to do that? Hmmm... actually that would solve another problem I have. I'll try searching for that.

The semantic templating tools suggest are interesting (had never heard of it. / ) but am I correct that all such scripting add-ons will execute after the page first renders?

This is for a Javascript application that is only intended to run on a local machine, accessing many large image files from local disk.

Original code like this:

<script>
// Constants, var inits, etc.
</script>

<-- Then html stuff including some control buttons, each one like this -->
<img id="pgb_runStop" onclick="click_runStop()" src="buttons/but_run.png">

<--then a chunk of javascript related to the buttons -->

The thing works OK, see http://everist/NobLog/20150424_js_animated_gallery.htm

Now I want to extend it, so all image pathnames are defined as js constants and vars. Some will remain fixed during lifetime of the browser page, others will change by user actions. I'm stuck with one part of this. How to get the html parser to pay attention to script blocks WITHIN <img .... > statements?

Specifically, I want to do a document.write() within the image src string.

Like: <img src="<script>document.write(B_PATH)</script>something.png">

This is for the initial page display. The images later get changed by scripts, and that's working OK.

But the html parser doesn't seem to notice scripts inside html elements.

I'm a javascript nubie, so I may have some stupid misconception of how it all works. Am I just doing it wrong, or is this fundamentally impossible due to reasons?

Here's an example:

<script>
// Constants
PGL_BUT_PATH = "buttons/"      // where the button images etc are.
</script>

<-- some html stuff -->

<-- including some control buttons, each one like this -->
<img id="pgb_runStop" onclick="click_runStop()"
src="<script>document.write(PGL_BUT_PATH);</script>but_run.png">

<--then a chunk of javascript related to the buttons -->

In debugger, the img element appears as:

  <img id="pgb_runStop" onclick="click_runStop()"
  src="<script>document.write(PGL_BUT_PATH);</script>but_run.png"/>

The intent was to get this:

  <img id="pgb_runStop" onclick="click_runStop()"
  src="buttons/but_run.png"/>

I could just give up with trying to have the page initially render with the correct buttons, and have js correct them afterwards. I'm just surprised... Isn't it possible to evaluate js constants during initial html parsing to construct the DOM, in this way?

Edit to add: Sorry, I wasn't clear enough in the question. What I want is a way for js to make the html content/DOM correct (per js config values that get defined very early on) BEFORE the page first renders. To avoid any flicker or resizings after first render.

So another solution would be to delay the first page render till after some scripts have run, so they can make initial DOM adjustments before the user sees anything. Any way to do that? Hmmm... actually that would solve another problem I have. I'll try searching for that.

The semantic templating tools suggest are interesting (had never heard of it. http://www.martin-brennan./semantic-templates-with-mustache-js-and-handlebars-js/ ) but am I correct that all such scripting add-ons will execute after the page first renders?

• javascript
• html
• document.write

Share Improve this question Follow edited Apr 28, 2015 at 5:24 TerraHertz asked Apr 28, 2015 at 4:06 TerraHertzTerraHertz 2111 silver badge33 bronze badges 1

• I should have mentioned, I already change the buttons later in scripts, for eg: document.getElementById('pgb_reverse').src = PGL_BUT_PATH + "but_revr_gray.png"; // grayed out – TerraHertz Commented Apr 28, 2015 at 4:29

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 1

You cannot embed a tag within another tag's attribute. So you cannot embed a <script> inside the src of an <img>. That's just invalid won't-be-parsed HTML.

What you can do, though, is write the attribute after the fact:

<img id="uniqueId">

<script>
    var img = document.getElementById('uniqueId')
    img.setAttribute('src', PGL_BUT_PATH)
</script>

The <img> tag without a src attribute in that is invalid HTML technically, although it will probably work in any browser anyway. But if you want to stay totally legit, create the <img> with JavaScript too.

<div id="uniqueId"></div>

<script>
    var elem = document.getElementById('uniqueId');
    var img = document.createElement('img');
    img.setAttribute('src', PGL_BUT_PATH);
    elem.appendChild(img);
</script>

Tthough I really have no idea why would you like to do this. This one works for me

<img id="pgb_runStop" onclick="click_runStop()"
     src = "about:blank"
     onerror="javascript:this.src = PGL_BUT_PATH + 'but_run.png'; this.onerror = null;>

or Another way

<script>
  function createImg(src) {
    document.write("<img src='" + src + "'>");
  }
</script>

<script>createImg(PGL_BUT_PATH + 'but_run.png')</script>

Another more generic approach

<script>
  function templete(temp, src) {
    document.write(temp.replace("$STR", src));
  }
</script>

<script>templete('<img id="pgb_runStop" onclick="click_runStop()" src="$STR"/>', PGL_BUT_PATH + 'but_run.png')</script> 

Javascript isn't a templating engine in and of itself, and it looks like that's what you're trying to achieve here. Look into a javascript template library such as Handlebars and you'll have more luck.

Unfortunately, JavaScript doesn't work that way you are setting the src to <script></script> which all the browser thinks of it is just a weird URL. Try:

document.getElementById('pgb_runStop').src = PGL_BUT_PATH + 'but_run.png';

You can change pgb_runStop to whatever is the id of the element.

You can use a Framework like Angular.js to do things like that. I don't use angular.js myself but you can of some pretty incredible stuff with it.

Here's a list of even more engines that you can use

---

You can also use:

document.getElementById('pgb_runStop')setAttribute('src', PGL_BUT_PATH + 'but_run.png');

---

Basically, you can do:

(function(){window.onload=function(){
        document.getElementById('pgb_runStop')setAttribute('src', PGL_BUT_PATH + 'but_run.png');
};}());

Which should function the exact same

Why not write the whole image in:

document.write('<img src="' + PGL_BUT_PATH + 'but_run.png"/>');

Fiddle

本文标签： javascriptHow to documentwrite() within an image src string Doesn39t get parsedStack Overflow