iframe内でscriptを実行する方法について

用意されているDivタグ内に、javascriptでscriptタグ(外部js)を挿入しようとしたところ、
下記のエラーとなりました。
Failed to execute 'write' on 'Document': It isn't possible to write into a document from an asynchronously-loaded external script unless it is explicitly opened

そのため、以下のコードでiframeを作成し、その中で外部jsを実行させようとしたのですが
上手く実行されない状況です。
どのように修正したらよろしいでしょうか。

function createIframe(id, script_url) {
    //iframeをつくる
    var iframe = document.createElement('iframe');
    document.getElementById(id).appendChild(iframe);

    var html = '';
    html += '<body>';
    html += '<script src="' + script_url + '"></script>';
    html += '</body>';

    var doc = iframe.contentWindow.document;
    doc.open();
    doc.write(html);
    doc.close();
}

※
id→Divタグのid
script_url→外部jsのurl

行動規範の内容に同意します

回答2件

Failed to execute 'write' on 'Document'

**Content Security Policy (CSP)**が働いているのでしょうか。
状況再現の為の情報があると、具体的な解秘策となる回答が寄せられるかもしれません。

Content Security Policy (CSP) - Web セキュリティ | MDN

Blob

Blob() を活用すれば、iframe要素において任意の要素を持つ文書を作成できます。

JavaScript
1'use strict';
2var doc = document,
3    iframe = document.createElement('iframe');
4
5iframe.src = URL.createObjectURL(new Blob(['<!DOCTYPE html><title>sample</title><p>Hello,World!</p>'], {type: 'text/html'}));
6doc.body.appendChild(iframe);

Re: chikano さん

投稿2017/10/25 17:24

think49

総合スコア18162

非同期で読み込まれる外部スクリプトからはdocument.write()は実行できません。
なのでこれを実行したいのであれば同期で読み込む必要があります。

以下のサイトがとても詳しく説明してくれています。
https://aloerina01.github.io/javascript/2016/10/14/1.html

投稿者様にとって私に言われる筋合いはないお話ではありますし、説教垂れるほどの身分でもありませんが、
このエラーは比較的初歩のものでありまして、コード実装時やエラーが出た際にdocumentオブジェクトについて調べれば割とすぐにわかるものです。
エラーメッセージをまるっと検索すればこのサイトでほぼ同等の内容で質問されているものが出てきます。
とても長い時間が悩むよりは、早めに質問することも大切ですが、少しは投稿者様自身でお調べになられたほうが、今後のためにもなるかと思います・・・。

投稿2017/10/25 10:01