7

「ウィジェット」と呼ぶものがあります...そしてiframe、スクリプト タグの現在の場所にそのウィジェット (最終的には単なる ) を挿入したいと考えています。

だからあなたは持っているかもしれません：

<p>Some example text</p>
<script src="http://example.com/widget.js" class="widget" async></script>
<p>More text</p>

そのwidget.jsファイルには、これがあります：

var createIframe = function() {
  var parent = document.getElementsByClassName('widget');
  var iframe = document.createElement('iframe');

  iframe.src = '//example.com'

  // Works, but just inserts it at the end
  document.body.appendChild(iframe);

  // Does not work...just doesn't seem to do anything
  document.createElement("div").appendChild(iframe);
}

window.onload = function() {
  createIframe();
}

コードのコメントに記載されているように、document.body.appendChild(iframe)問題なく動作しますが、ドキュメントの最後に iframe を挿入するだけです。

しかし、私が本当にやりたいことは、script タグがある場所に iframe を挿入することです。それdocument.body.appendChild(iframe)は私の試みですが、文字通り何もしていないようです（iframeもエラーもありません）。

では、スクリプト タグと同じ場所に iframe を挿入するにはどうすればよいでしょうか。

4

2 に答える 2

14

この場合は最後のタグである現在の<script>タグを取得する必要があります。

var thisScript = document.scripts[document.scripts.length - 1];

その後ろに挿入<iframe>します：

var parent = thisScript.parentElement;
parent.insertBefore(iframe, thisScript.nextSibling);

http://jsfiddle.net/mattball/Tz75x/

または、現在のスクリプトを次のように置き換え<iframe>ます。

var parent = thisScript.parentElement;
parent.replaceChild(iframe, thisScript);

http://jsfiddle.net/mattball/a23XE/

別の方法として (信じることができる場合)、コールバックではなくドキュメントの読み込み中に実行する限り、document.write()実際にはここで適切なソリューションです。window.onload

function createIframe() {
    document.write('<iframe src="//example.com"></iframe>');
}

createIframe();

http://jsfiddle.net/mattball/2YCcP

于 2013-02-26T04:37:14.997 に答える
1

要素に ID を追加し、<script>この要素を DOM からクエリします<script id="myscript" src="http://example.com/widget.js" class="widget" async></script>。

でwidget.js：

var scriptElement = document.getElementById("myscript");
var parentElement = scriptElement.parentElement;
parentElement.replaceChild(iframe, scriptElement);
于 2013-02-26T04:42:27.773 に答える