如何在iframe的head标签中追加元素?

时间:2017-12-18 11:06:52

标签: javascript jquery html iframe

1)我想动态创建一个iframe。

2)我已经为头部和身体标签模拟了数据(字符串模板)。

3)我想用 2)

中的给定数据创建iframe

代码

    Uri uri = CalendarContract.Events.CONTENT_URI;

    String[] projection = new String[]{
            CalendarContract.Events._ID,
            CalendarContract.Events.DTSTART,
            CalendarContract.Events.DTEND,
            CalendarContract.Events.ALL_DAY,
            CalendarContract.Events.TITLE,
            CalendarContract.Events.EVENT_COLOR,
            CalendarContract.Events.CALENDAR_ID,
            CalendarContract.Events.DESCRIPTION,
            CalendarContract.Events.ORGANIZER,
            // If status = 2 it is cancelled by organizer
            CalendarContract.Events.STATUS,
            // If self attendee status  = 2 it is declined by user
            CalendarContract.Events.SELF_ATTENDEE_STATUS,
            CalendarContract.Events.RDATE,
            CalendarContract.Events.LAST_DATE
    };

    String[] calendarID;
    for (int i = 0; i < EmailId.size(); i++) {
        calendarID = new String[]{EmailId.get(i)};

       Cursor c = context.getContentResolver().query(uri, projection,
                CalendarContract.Instances.CALENDAR_ID + " = ?", calendarID, CalendarContract.Events.DTSTART);

        if (c.moveToFirst()) {
            do {
                Evnt e = new Evnt();

                e._id = c.getLong(0);

                e.startDate = "";
                e.startDate = getDate(c.getString(1));

                e.startTime = "";
                e.startTime = getTime(c.getString(1));


                e.endDate = "";
                e.endDate = getDate(c.getString(2));

                e.endTime = "";
                e.endTime = getTime(c.getString(2));

                e.all_day = c.getInt(3);
                e.title = c.getString(4);
                e.color = c.getInt(5);
                e.calendar_id = c.getLong(6);
                e.desc = c.getString(7);
                e.organizer = c.getString(8);

                e.nine = c.getString(9);
                e.ten = c.getString(10);
                e.eleven = c.getString(11);

                e.twelve = "";
                e.twelve = getDate(c.getString(12));

                ourEvents.add(e);

            } while (c.moveToNext());
        }

如何在iframe头标记中注入 headHtml

1 个答案:

答案 0 :(得分:2)

您已经完成了大部分工作。文档的内容不仅仅是正文,而是整个内容,因此您构建整个内容然后将其传递给encodeURIComponent(而不是encodeURI):

&#13;
&#13;
var bodyHtml = '<p>Content</p>';
var headHtml = '<title>Title</title>';

var iframe = document.createElement('iframe');

// inject the bodyHTML to locally iframe
iframe.src = 'data:text/html;charset=utf-8,' + encodeURIComponent(
  "<!doctype html>" +
  "<html>" +
  "<head>" + headHtml + "</head>" +
  "<body>" + bodyHtml + "</body>" +
  "</html>"
);

// inject my iframe in the DOM
$('body').append(iframe);
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
&#13;
&#13;
&#13;

或者使用ES2015 +语法(特别是模板文字):

// inject the bodyHTML to locally iframe
iframe.src = 'data:text/html;charset=utf-8,' + encodeURIComponent(`
  <!doctype html>
  <html>
  <head>${headHtml}</head>
  <body>${bodyHtml}</body>
  </html>
`);

直播示例:

&#13;
&#13;
const bodyHtml = '<p>Content</p>';
const headHtml = '<title>Title</title>';

const iframe = document.createElement('iframe');

// inject the bodyHTML to locally iframe
iframe.src = 'data:text/html;charset=utf-8,' + encodeURIComponent(`
  <!doctype html>
  <html>
  <head>${headHtml}</head>
  <body>${bodyHtml}</body>
  </html>
`);

// inject my iframe in the DOM
$('body').append(iframe);
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
&#13;
&#13;
&#13;