What alternative to use instead of Document.write

Asked

Viewed 1,098 times

5

It is said that Document.write is not a good practice, and it also doesn’t work after window.onload, which is the case I need. I have the following function that needs to change Document.write, the detail is that I need the content to be added in the same tag/element that is the call of the function inside the tag , without the parent element always being 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>');
}

example of the situation:

<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>

Can you do that? thanks in advance for the attention

javascript

  • Have you tried the innerHTML ?

  • You can put an id in the div?

  • Although in this particular case document.write should work.

  • @Edison, I don’t know how to do this without specifying the id, it’s like?

  • @bfavaretto, the call comes from inside articles and already mtos, would not have to change that. So, there is no way to change and put an id, sometimes even has , but as said is not always the same

  • You can identify the block <script> that’s spinning, but that doesn’t always work.

  • Where does this? server code come from? PHP? why not generate HTML already with everything, instead of doing Javascript that will write HTML? Explain a little better where the code comes from.

  • the function is inside a.js file loaded with async tag. This function is already inside hundreds of articles in a database. Therefore changing each one is not a viable alternative method as I changed the loading of the.js file a little while ago, I’m having to make some adjustments and this is the last one. In case I have to rename the function inside the.js file to Gerarsfw2 and in the page I have to create the Function Gerarsfw(){window.load=Gerarsfw2();} . This pq qdo the.js file is loaded async, no way to know when it will be completed and it may occur after the function is called, the error qdaria

  • Can you show the php function that generates this example HTML? how GerarSWF($arquivo,$largura,$altura,$id) receives these arguments?

  • is in Asp, but there is no programming in relevant Asp in this section. is a content in a data database field that contains an article basically with text and html, in case someone uses image or flash by the content editor, the editor inserts this code, I could change it but would only change the new ones and would have a hell of a job to change the old ones that are already there

Show 5 more comments

1 answer

4


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

You can inspect the HTML to see how it looked.

// 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 on jsfiddle

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

I developed this other script, I’ll explain it. It takes all tags script within the body checks which have the word GerarSWF and their respective parameters, if they have the corresponding values, creates the object with param and embed and add to the tag script in question, after that, removes the tag script. I believe not to be one of the best alternatives, maybe adjust and or improve some functionality in the script it gets 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 inside the tag head page.

See working on jsfiddle

  • Anyway I would have to insert these div in the place where the <script> tag is and then your function would work. My big doubt is how to insert something where the name id or tag is not always the same? The only constant thing is to have q insert inside the same element tag q is being called the function <script>Gerarswf()</script>

  • @Supermax I developed another way, as you explained in the comment, give an analysis.

  • Thank you very much, it worked very well. I just didn’t understand pq 3 items were not written in embed:: embed.menu = param2.menu; embed.wmode = param3.wmode; embed.quality = 'high'; . But I think it shouldn’t be a problem

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.