javascript - Alternatives to document.write

Question

Welcome To Ask or Share your Answers For Others

javascript - Alternatives to document.write

posted Oct 24, 2021 in Technique[技术] by 深蓝 (71.8m points)

javascript - Alternatives to document.write

I am in a situation where it seems that I must use document.write in a javascript library. The script must know the width of the area where the script is defined. However, the script does not have any explicit knowledge of any tags in that area. If there were explicit knowledge of a div then it would be as simple as this:

<div id="childAnchor"></div>
<script ref...
 //inside of referenced script
 var divWidth = $("#childAnchor").width();
</script>

So, inside of the referenced script, I am thinking of doing using document.write like this:

<script ref...
 //inside of referenced script
 var childAnchor = "z_87127XNA_2451ap";
 document.write('<div id="' + childAnchor + '"></div>');
 var divWidth = $("#" + childAnchor).width();
</script>

However, I do not really like the document.write implementation. Is there any alternative to using document.write here? The reason that I cannot simply use window is that this is inside of a view which is rendered inside of a master view page. Window would not properly get the nested area width.

The area is pretty much in here:

<body>
 <div>
  <div>
   <div>
     AREA

The AREA has no knowledge of any of the other divs.

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1 Reply

深蓝 · Answer 1 · 2021-10-23T21:35:29+0000

This just occurred to me, and I remembered your question: the script code can find the script block it is in, so you can traverse the DOM from there. The current script block will be the last one in the DOM at the moment (the DOM still being parsed when the code runs).

By locating the current script block, you can find its parent element, and add new elements anywhere:

<!doctype html>
<html>
    <head>
        <style>
        .parent .before { color: red; }
        .parent .after { color: blue; }
        </style>
    </head>
    <body>
        <script></script>
        <div class="parent">
            <span>before script block</span>
            <script>
            var s = document.getElementsByTagName('script');
            var here = s[s.length-1];

            var red = document.createElement("p");
            red.className = 'before';
            red.innerHTML = "red text";
            here.parentNode.insertBefore(red, here);

            var blue = document.createElement("p");
            blue.className = 'after';
            blue.innerHTML = "blue text";
            here.parentNode.appendChild(blue);
            </script>
            <span>after script block</span>
        </div>
        <script></script>
    </body>
</html>?

http://jsfiddle.net/gFyK9/2/

Note the "blue text" span will be inserted before the "after script block" span. That's because the "after" span does not exist in the DOM at the moment appendChild is called.

However there's a very simple way to make this fail.

Categories

javascript - Alternatives to document.write

javascript - Alternatives to document.write

Please log in or register to add a comment.

Please log in or register to reply this article.

1 Reply

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags