Which alternative to use instead of document.write

Question

Which alternative to use instead of document.write

Navigation

#1 by (4 votes)

5

It is said that document.write is not a good practice, and also does not work after window.onload, which is the case I need. I have the following function that I need to change the document.write, the detail is that I need the content to be added in the same tag / element that is the call of the dento function of the tag, without the parent element being always the same.

function GerarSWF($arquivo,$largura,$altura,$id){
    document.writeln(' <object type="application/x-shockwave-flash" id="' + $id + '" data="' + $arquivo + '" width="' + $largura + '" height="' + $altura + '">'); 
    document.writeln(' <param name="movie" value="' + $arquivo + '" />'); 
    document.writeln(' <param name="menu" value="false" />');
    document.writeln(' <param name="wmode" value="transparent" />');
    document.writeln(' <embed src="' + $arquivo + '" type="application/x-shockwave-flash" wmode="transparent" menu="false" quality="high" id="' + $id + '" width="' + $largura + '" height="' + $altura + '"></embed>');
    document.writeln(' </object>');
}

Situation example:

<html>
<body>
<div id="pode_nem_sempre_ser_o_mesmo">
  <div>
    <script>GerarSWF(bla,bla);
    //o conteudo tem q ficar dentro dessa div q está o <script>
    //mas pode aparecer em locais diversos, nem sempre saberei o id ou tag
    </script>
  </div>
</div>
</body>

How can you do this? Thank you in advance for your attention.

javascript

asked by anonymous 03.12.2015 / 15:14

1 answer

Multiple pages with a different id FreeASPUpload Classic ASP stopped working

score 4 · Accepted Answer

If it is possible not to declare a script tag by calling the function to add the HTML to the div it is in. You can try creating a div with custom attributes and from there search the elements that have the attributes and add the HTML, follow the example.

You can preview the HTML to see how it looks.

// Função para criar os SWF.
function appendSWF() {
  
  // Busca todos elementos com atribuito gera-swf.
  var swfs = document.querySelectorAll('[gera-swf]');
  
  Array.prototype.forEach.call(swfs, function(arr) {
    var eObj = document.createElement('object'),
      	eParam1 = document.createElement('param'),
      	eParam2 = document.createElement('param'),
      	eParam3 = document.createElement('param'),
      	eEmbed = document.createElement('embed'),
        eData = arr.getAttribute('swf-data'),
        eId = arr.getAttribute('swf-id'),
        eWidth = arr.getAttribute('swf-width'),
        eHeight = arr.getAttribute('swf-height');
    
    // Define atribuito estáticos.
    eObj.type = "application/x-shockware-flash";
    eParam1.name = 'movie';
    eParam2.name = 'menu';
    eParam2.value = 'false';
    eParam3.name = 'wmode';
    eParam3.value = 'transparent';
    eEmbed.type = "application/x-shockware-flash";
    eEmbed.wmode = 'transparent';
    eEmbed.menu = 'false';
    eEmbed.quality = 'high';
    
    // Define os atributos e seus valores no elemento Object.
    eObj.data = eData;
		eObj.id = eId;
    eObj.width = eWidth;
    eObj.height = eHeight;
    
    // Seta os atributos aos elementos param e adiciona ao elemento Object.
    eParam1.value = eData;
    eObj.appendChild(eParam1);
    eObj.appendChild(eParam2);
    eObj.appendChild(eParam3);
    
    // Seta os atributos ao elemento embed e adiciona ao elemento Object.
    eEmbed.src = eData;
    eEmbed.id = eId;
    eEmbed.width = eWidth;
    eEmbed.height = eHeight;
    eObj.appendChild(eEmbed);
    
    // Adiciona o elemento Object a div[gera-swf].
    
    arr.appendChild(eObj);
  });
}

document.addEventListener('DOMContentLoaded', appendSWF);

div {
  background-color: gray;
  margin: 5px;
}

<div gera-swf swf-data="text.txt" swf-id="1" swf-width="100" swf-height="100"></div>
<div gera-swf swf-data="file.txt" swf-id="2" swf-width="25" swf-height="25"></div>

See also jsfiddle

@Edit As mentioned in the comments the need to be a script element with the function call.

I developed this other script, I'll explain it. It takes all the script tags inside body verifies which ones have the word GerarSWF and their respective parameters, if they have the corresponding values, it creates the structure object with param and embed and adds to the tag script in question, after that, remove the script tag. I do not think it's one of the best alternatives, maybe adjusting and improving some of the features in the script will get better.

<script>
function GerarSWF(pId, pFile, pWidth, pHeight) {
  document.addEventListener('DOMContentLoaded', function() {
    var allElements = document.body.getElementsByTagName('script');
    Array.prototype.forEach.call(allElements, function(arr) {
      if(arr.textContent.indexOf('GerarSWF') !== -1 &&
         arr.textContent.indexOf(pId)        !== -1 &&
         arr.textContent.indexOf(pFile)      !== -1 && 
         arr.textContent.indexOf(pWidth)     !== -1 && 
         arr.textContent.indexOf(pHeight)    !== -1 )  {
        
        var parent = arr.parentNode;
        var obj = document.createElement('object');
        obj.type = 'application/x-shockwave-flash';
        obj.id = pId;
        obj.data = pFile;
        obj.width = pWidth;
        obj.height = pHeight;
        
        var param1 = document.createElement('param');
        var param2 = document.createElement('param');
        var param3 = document.createElement('param');
        
        param1.name = 'movie';
        param2.name = 'menu';
        param3.name = 'wmode';
        
        param1.value = pFile;
        param2.value = 'false';
        param3.value = 'transparent';
        
        var embed = document.createElement('embed');
        embed.src = pFile;
        embed.type = obj.type;
        embed.menu = param2.menu;
        embed.wmode = param3.wmode;
        embed.quality = 'hight';
        embed.id = pId;
        embed.width = pWidth;
        embed.height = pHeight;
        
        obj.appendChild(param1);
        obj.appendChild(param2);
        obj.appendChild(param3);
        obj.appendChild(embed);
        
        parent.appendChild(obj);
        parent.removeChild(arr);
      }
    });
  });
};
</script>

<div id="a">
  <script>GerarSWF('id01','data.txt',10,10);</script>
</div>
<div id="b">
  <div id="c">
    <script>GerarSWF('id02','data2.txt',20,20);</script>
  </div>
  <div id="d">
    <script>GerarSWF('if00','file1.doc',100,1);</script>
  </div>
</div>

Obs: A must be declared within the head tag of the page.

See working at jsfiddle