javascript - document.write 的替代方案

标签 javascript jquery document.write

我现在的情况似乎必须在 javascript 库中使用 document.write 。脚本必须知道定义脚本的区域的宽度。但是,该脚本对该区域中的任何标签没有任何明确的了解。如果对 div 有明确的了解,那么事情就会像这样简单:

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

因此,在引用的脚本内部,我正在考虑像这样使用 document.write :

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

但是,我不太喜欢 document.write 实现。这里除了使用 document.write 之外还有其他选择吗?我不能简单地使用窗口的原因是它位于主视图页面内呈现的 View 内部。窗口无法正确获取嵌套区域宽度。

该区域几乎就在这里:

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

AREA 不了解任何其他 div。

最佳答案

这只是我想到的,我记得你的问题:脚本代码可以找到它所在的脚本 block ,所以你可以从那里遍历 DOM。当前脚本 block 将是当前 DOM 中的最后一个脚本 block (代码运行时仍在解析 DOM)。

通过定位当前脚本 block ,您可以找到其父元素,并在任意位置添加新元素:

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

请注意,“蓝色文本”范围将插入到“脚本 block 之后”范围之前。这是因为在调用 appendChild 时,DOM 中不存在“after”范围。

<小时/>

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

关于javascript - document.write 的替代方案,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10762202/

相关文章:

如果我将浏览器最小化得太小,jquery 移动表单输入字段会奇怪地调整大小

javascript - 避免 html 页面中存在多个 src 文件

javascript - 无需访问 DOM 即可获取 SVG 中的文本大小

c# - 从页面 *.aspx.cs 调用 javascript 函数

jquery - 如何获取 jQuery.each 循环中的特定元素

javascript - 如何从 Firefox 扩展覆盖 JavaScript 函数?

javascript - NG-显示令人恼火的图像位移

javascript - jquery click 函数不适用于 if 语句

javascript - JavaScript花絮如何将远程小部件插入到页面上?

javascript - 别名化其他域上的DOM函数(Document.Write)和脚本