CODEWITHSUNDEEP
htmliframe
orlox
orlox

Reputation: 1330

Specifying content of an iframe instead of the src attribute to a page

I'm currently working on a form which includes some file inputs to upload pictures. There is an onchange() event for those inputs that submits the pictures to an iframe, then dynamically loads the uploaded pictures into the form, with fields to be modified for them (like name and geo-localization).

Since I can't nest forms, the file_input is also contained in an iframe. In the end I use an iframe inside of another iframe. So I have something like this:

<form>
<!-- LOTS OF FIELDS!! -->
<iframe src="file_input_url">
<!-- iframe which loads a page of a form with a file input-->
</iframe>
</form>

and the HTML loaded into the iframe is something like (excluding the html, head and body tags)

<form target="upload_iframe">
<input type="file" onchange="this.form.submit()">
</form>
<iframe name="upload_iframe"></iframe>

This works great, except for the fact that it takes a couple seconds to load the first iframe, so the file input does not load with the rest of the page. This is not visually ideal. I could solve it if I could specify the iframe content without needing to load another page (specified by file_input_url in the first iframe).

Is there a way to specify the iframe content in the same document, or can it only be specified with the src attribute, requiring the load of another page?

Upvotes: 120

Views: 156675

Answers (5)

Stefan Steiger
Stefan Steiger

Reputation: 82186

Necromancing.
Yes, you can, and without JavaScript !
You can specify base64 or just data-content in the src url. e.g.

<!DOCTYPE html>
<html lang="de">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<meta http-equiv="cache-control" content="max-age=0" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="0" />
<meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
<meta http-equiv="pragma" content="no-cache" />



<meta charset="utf-8" />
<title>How to embed an SVG sandboxed</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

  <!-- Add appropriate styles to the iframe to control its appearance -->
  <style>
      html, body
      {
          width: 100%;
          height: 100%;
          margin:0;
          padding: 0;
      }


  </style>
</head>
<body>
    <h1>Hello</h1>
    <!-- Create an iframe to sandbox user-uploaded SVGs -->
    <!--
    <object style="width: 30px;" data="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20437.00412%20279.53189%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20fill%3D%22%23FF00FF%22%20d%3D%22M251.99573%20182.23684h-5.27915V29.05126h5.27915zm38.7702-7.40139c0%205.27389-3.9857%208.7687-8.5786%208.7687-5.0416%200-8.6315-3.77461-8.6315-8.7687%200-5.27916%203.9858-8.76869%208.6315-8.76869%204.5929%200%208.5786%203.48953%208.5786%208.76869m-1.8741%200c0-4.27084-2.9563-7.24829-6.7045-7.24829-3.801%200-6.7574%202.97745-6.7574%207.24829%200%203.98577%202.5816%207.24302%206.7574%207.24302%203.7482%200%206.7045-2.95106%206.7045-7.24302m-8.4414.86579v4.14942h-1.5943v-9.70839h3.6796c2.344%200%203.5423.82355%203.5423%202.79268%200%201.75796-1.0769%202.48649-2.534%202.65014l2.7188%204.26557h-1.8055l-2.5076-4.14942zm0-1.35675h1.7791c1.1984%200%202.2542-.12142%202.2542-1.52568%200-1.17197-1.1508-1.31451-2.1116-1.31451h-1.9217zM.1003%20277.20906l1.84243-4.64039c.93969.69157%202.10639%201.27228%203.50537%201.74212%201.40954.45401%202.67126.68102%203.77988.68102%201.96913%200%203.55288-.53848%204.74597-1.61543%201.1931-1.07695%201.78964-2.44425%201.78964-4.11247%200-1.24588-.33787-2.39674-1.00832-3.45257-.6599-1.07695-2.32283-2.24365-4.99409-3.51065l-2.97745-1.38314c-2.52344-1.17726-4.28669-2.57096-5.29501-4.18638C.49624%20255.11574%200%20253.17301%200%20250.90297c0-2.75573.97136-5.04161%202.92466-6.85764%201.95329-1.81603%204.45561-2.72405%207.51753-2.72405%204.08608%200%206.92627.6599%208.52586%201.99025l-1.48873%204.38698c-.67573-.48568-1.69989-.95553-3.07775-1.40953-1.37787-.45401-2.65542-.68102-3.83268-.68102-1.71573%200-3.07247.48569-4.05968%201.46233-.97664.97665-1.46761%202.22781-1.46761%203.75877%200%20.93969.17949%201.8002.5332%202.57095.3537.77604.83939%201.4201%201.46233%201.94274.63878.52263%201.93217%201.25116%203.88019%202.19613l3.03024%201.43593c2.52344%201.1931%204.28668%202.62375%205.295%204.28669%201.02416%201.6471%201.53624%203.75349%201.54152%206.3086%200%202.77156-1.11919%205.12607-3.35755%207.05825-2.21725%201.93217-5.1947%202.89826-8.92707%202.90354-3.27837%200-6.0816-.77604-8.39916-2.32283m57.49013%202.19613H56.0014l-8.80037-25.47726-8.22494%2025.47726h-1.58903L25.73594%20241.9495h5.24749l7.41195%2025.80457%208.12464-25.80457h1.76324l8.01905%2025.75178%207.54393-25.75178h5.2475zM77.1867%20241.9495h5.0416v36.94889h-5.0416zm15.95892%2035.25956%201.84243-4.64039c.93969.69157%202.11167%201.27228%203.50537%201.74212%201.41481.45401%202.67653.68102%203.78516.68102%201.96385%200%203.5476-.53848%204.74069-1.61543%201.19309-1.07695%201.78964-2.44425%201.78964-4.11247%200-1.24588-.33259-2.39674-1.00832-3.45257-.65462-1.07695-2.32284-2.24365-4.9941-3.51065l-2.97745-1.38314c-2.51816-1.17726-4.28668-2.57096-5.295-4.18638-.99248-1.61543-1.48873-3.55816-1.48873-5.8282%200-2.75573.97665-5.04161%202.92466-6.85764%201.9533-1.81603%204.45562-2.72405%207.51754-2.72405%204.08607%200%206.92626.6599%208.52585%201.99025l-1.48872%204.38698c-.67046-.48568-1.69462-.95553-3.07776-1.40953-1.37786-.45401-2.65542-.68102-3.83267-.68102-1.71573%200-3.0672.48569-4.05968%201.46233-.97665.97665-1.46233%202.22781-1.46233%203.75877%200%20.93969.17421%201.8002.52792%202.57095.3537.77604.83938%201.4201%201.46232%201.94274.63878.52263%201.93218%201.25116%203.88547%202.19613l3.02496%201.43593c2.52345%201.1931%204.28669%202.62375%205.30029%204.28669%201.02416%201.6471%201.53624%203.75349%201.53624%206.3086%200%202.77156-1.11919%205.12607-3.35228%207.05825-2.22253%201.93217-5.19998%202.89826-8.93235%202.90354-3.27836%200-6.07632-.77604-8.39915-2.32283m28.97735%200%201.84243-4.64039c.93969.69157%202.10638%201.27228%203.50536%201.74212%201.41482.45401%202.67126.68102%203.78517.68102%201.96385%200%203.5476-.53848%204.74069-1.61543%201.19309-1.07695%201.78963-2.44425%201.78963-4.11247%200-1.24588-.33786-2.39674-1.00832-3.45257-.65461-1.07695-2.32283-2.24365-4.99409-3.51065l-2.97745-1.38314c-2.52344-1.17726-4.28668-2.57096-5.295-4.18638-.99249-1.61543-1.48873-3.55816-1.48873-5.8282%200-2.75573.97665-5.04161%202.92466-6.85764%201.95329-1.81603%204.45562-2.72405%207.51753-2.72405%204.08608%200%206.92627.6599%208.52586%201.99025l-1.48873%204.38698c-.67573-.48568-1.69989-.95553-3.07775-1.40953-1.37786-.45401-2.65542-.68102-3.83268-.68102-1.71573%200-3.06719.48569-4.05968%201.46233-.97664.97665-1.4676%202.22781-1.4676%203.75877%200%20.93969.17949%201.8002.53319%202.57095.35371.77604.83939%201.4201%201.46233%201.94274.63878.52263%201.93218%201.25116%203.88547%202.19613l3.02496%201.43593c2.52344%201.1931%204.28668%202.62375%205.29501%204.28669%201.02943%201.6471%201.53623%203.75349%201.54151%206.3086%200%202.77156-1.11918%205.12607-3.35755%207.05825-2.21725%201.93217-5.1947%202.89826-8.92707%202.90354-3.27836%200-6.07632-.77604-8.39915-2.32283m48.66336-12.53275v14.22208h-5.04161V241.9495c3.81684-.16893%206.11856-.2534%206.91043-.2534%2010.72727%200%2016.0909%203.58983%2016.0909%2010.7695%200%208.30941-4.74069%2012.45884-14.22735%2012.45884-.57015%200-1.81604-.0792-3.73237-.24813m0-18.18673v13.64665l3.38394.24812c6.25054%200%209.38108-2.46009%209.38108-7.38555%200-4.50841-3.34171-6.76262-10.01458-6.76262-.67045%200-1.58903.0845-2.75044.2534m44.78317%2032.40881-9.86148-15.8639c-1.12975%200-2.90883-.0845-5.3478-.2534v16.1173h-5.04688V241.9495l3.91186-.17421c2.43897-.13726%204.21277-.20061%205.3214-.20589%208.87956%200%2013.31934%203.53176%2013.31934%2010.59529%200%202.31755-.71797%204.41338-2.14334%206.28221-1.43066%201.84771-3.13055%202.99856-5.09968%203.45257l10.72199%2016.99892zm-15.20928-32.40881v12.00483c1.20893.16893%202.38618.2534%203.53176.2534%203.02497%200%205.22638-.48568%206.60424-1.46233%201.38314-.97665%202.06943-2.71877%202.06943-5.2211%200-2.06943-.73908-3.55815-2.21725-4.46617-1.48344-.90802-3.81683-1.36203-7.01073-1.36203-.5068%200-1.49928.0845-2.97745.2534m29.78506-4.54008h5.04688v36.94889h-5.04688zm46.47775%2036.94889-4.387-23.72986-8.0718%2024.23666h-1.2617l-8.2989-24.23666-4.2866%2023.72986h-4.79354l6.91044-36.94889h2.2964l8.8004%2026.96071%208.1246-26.96071h2.2701l7.4911%2036.94889zm20.5888-32.40881v10.26798h12.2054v4.28669h-12.2054v13.31406h16.7455v4.54008h-21.7924V241.9495h22.0722v4.54008zm39.1028%2030.71948%201.8424-4.64039c.9397.69157%202.1064%201.27228%203.5054%201.74212%201.4095.45401%202.6712.68102%203.7799.68102%201.9691%200%203.5475-.53848%204.7459-1.61543%201.1931-1.07695%201.7897-2.44425%201.7897-4.11247%200-1.24588-.3379-2.39674-1.0084-3.45257-.6599-1.07695-2.3228-2.24365-4.9941-3.51065l-2.9774-1.38314c-2.5234-1.17726-4.2867-2.57096-5.295-4.18638-.9925-1.61543-1.4887-3.55816-1.4887-5.8282%200-2.75573.9713-5.04161%202.9246-6.85764%201.948-1.81603%204.4557-2.72405%207.5176-2.72405%204.086%200%206.9262.6599%208.5258%201.99025l-1.4887%204.38698c-.6757-.48568-1.6999-.95553-3.0778-1.40953-1.3831-.45401-2.6554-.68102-3.8379-.68102-1.7105%200-3.0672.48569-4.0544%201.46233-.9767.97665-1.4676%202.22781-1.4676%203.75877%200%20.93969.1795%201.8002.5332%202.57095.3537.77604.8394%201.4201%201.4623%201.94274.6388.52263%201.9322%201.25116%203.8802%202.19613l3.0302%201.43593c2.5235%201.1931%204.2867%202.62375%205.295%204.28669%201.0242%201.6471%201.5363%203.75349%201.5416%206.3086%200%202.77156-1.1192%205.12607-3.3576%207.05825-2.2172%201.93217-5.1947%202.89826-8.9271%202.90354-3.2783%200-6.0763-.77604-8.3991-2.32283m30.4924-35.25956h5.0417v36.94889h-5.0417zm29.0249%204.54008v32.40881h-5.0416v-32.40881h-11.7567v-4.54008h29.0829v4.54008zm24.1522%200v10.26798h12.2054v4.28669h-12.2054v13.31406h16.7455v4.54008h-21.7924V241.9495h22.0669v4.54008zM64.84929%20211.18252c48.61584-13.77863%2099.91351-21.14835%20152.93218-21.14835%2053.21396%200%20104.70176%207.42779%20153.47066%2021.30144l-1.2934%204.5612c-48.3572-13.75751-99.4067-21.12194-152.17726-21.12194-52.5805%200-103.44527%207.30636-151.63879%2020.96885zm171.30368-28.94568h-5.28444V0h5.28444zm-15.84806%200h-5.27916V0h5.27916zm-15.84806%200h-5.28444V0h5.28444zm-15.84278%200h-5.28444V52.82335h5.28444zm-15.84806%200h-5.27916V52.82335h5.27916zm95.07782%200h-5.2845V29.05126h5.2845z%22%20%2F%3E%0A%20%20%20%20%20%20%20%20%3C%2Fsvg%3E"></object>
        -->
    <iframe style="outline: 1px solid crimson; width: 30px; height: 30px; margin: 0px; padding: 0px;" src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20437.00412%20279.53189%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20fill%3D%22%23FF00FF%22%20d%3D%22M251.99573%20182.23684h-5.27915V29.05126h5.27915zm38.7702-7.40139c0%205.27389-3.9857%208.7687-8.5786%208.7687-5.0416%200-8.6315-3.77461-8.6315-8.7687%200-5.27916%203.9858-8.76869%208.6315-8.76869%204.5929%200%208.5786%203.48953%208.5786%208.76869m-1.8741%200c0-4.27084-2.9563-7.24829-6.7045-7.24829-3.801%200-6.7574%202.97745-6.7574%207.24829%200%203.98577%202.5816%207.24302%206.7574%207.24302%203.7482%200%206.7045-2.95106%206.7045-7.24302m-8.4414.86579v4.14942h-1.5943v-9.70839h3.6796c2.344%200%203.5423.82355%203.5423%202.79268%200%201.75796-1.0769%202.48649-2.534%202.65014l2.7188%204.26557h-1.8055l-2.5076-4.14942zm0-1.35675h1.7791c1.1984%200%202.2542-.12142%202.2542-1.52568%200-1.17197-1.1508-1.31451-2.1116-1.31451h-1.9217zM.1003%20277.20906l1.84243-4.64039c.93969.69157%202.10639%201.27228%203.50537%201.74212%201.40954.45401%202.67126.68102%203.77988.68102%201.96913%200%203.55288-.53848%204.74597-1.61543%201.1931-1.07695%201.78964-2.44425%201.78964-4.11247%200-1.24588-.33787-2.39674-1.00832-3.45257-.6599-1.07695-2.32283-2.24365-4.99409-3.51065l-2.97745-1.38314c-2.52344-1.17726-4.28669-2.57096-5.29501-4.18638C.49624%20255.11574%200%20253.17301%200%20250.90297c0-2.75573.97136-5.04161%202.92466-6.85764%201.95329-1.81603%204.45561-2.72405%207.51753-2.72405%204.08608%200%206.92627.6599%208.52586%201.99025l-1.48873%204.38698c-.67573-.48568-1.69989-.95553-3.07775-1.40953-1.37787-.45401-2.65542-.68102-3.83268-.68102-1.71573%200-3.07247.48569-4.05968%201.46233-.97664.97665-1.46761%202.22781-1.46761%203.75877%200%20.93969.17949%201.8002.5332%202.57095.3537.77604.83939%201.4201%201.46233%201.94274.63878.52263%201.93217%201.25116%203.88019%202.19613l3.03024%201.43593c2.52344%201.1931%204.28668%202.62375%205.295%204.28669%201.02416%201.6471%201.53624%203.75349%201.54152%206.3086%200%202.77156-1.11919%205.12607-3.35755%207.05825-2.21725%201.93217-5.1947%202.89826-8.92707%202.90354-3.27837%200-6.0816-.77604-8.39916-2.32283m57.49013%202.19613H56.0014l-8.80037-25.47726-8.22494%2025.47726h-1.58903L25.73594%20241.9495h5.24749l7.41195%2025.80457%208.12464-25.80457h1.76324l8.01905%2025.75178%207.54393-25.75178h5.2475zM77.1867%20241.9495h5.0416v36.94889h-5.0416zm15.95892%2035.25956%201.84243-4.64039c.93969.69157%202.11167%201.27228%203.50537%201.74212%201.41481.45401%202.67653.68102%203.78516.68102%201.96385%200%203.5476-.53848%204.74069-1.61543%201.19309-1.07695%201.78964-2.44425%201.78964-4.11247%200-1.24588-.33259-2.39674-1.00832-3.45257-.65462-1.07695-2.32284-2.24365-4.9941-3.51065l-2.97745-1.38314c-2.51816-1.17726-4.28668-2.57096-5.295-4.18638-.99248-1.61543-1.48873-3.55816-1.48873-5.8282%200-2.75573.97665-5.04161%202.92466-6.85764%201.9533-1.81603%204.45562-2.72405%207.51754-2.72405%204.08607%200%206.92626.6599%208.52585%201.99025l-1.48872%204.38698c-.67046-.48568-1.69462-.95553-3.07776-1.40953-1.37786-.45401-2.65542-.68102-3.83267-.68102-1.71573%200-3.0672.48569-4.05968%201.46233-.97665.97665-1.46233%202.22781-1.46233%203.75877%200%20.93969.17421%201.8002.52792%202.57095.3537.77604.83938%201.4201%201.46232%201.94274.63878.52263%201.93218%201.25116%203.88547%202.19613l3.02496%201.43593c2.52345%201.1931%204.28669%202.62375%205.30029%204.28669%201.02416%201.6471%201.53624%203.75349%201.53624%206.3086%200%202.77156-1.11919%205.12607-3.35228%207.05825-2.22253%201.93217-5.19998%202.89826-8.93235%202.90354-3.27836%200-6.07632-.77604-8.39915-2.32283m28.97735%200%201.84243-4.64039c.93969.69157%202.10638%201.27228%203.50536%201.74212%201.41482.45401%202.67126.68102%203.78517.68102%201.96385%200%203.5476-.53848%204.74069-1.61543%201.19309-1.07695%201.78963-2.44425%201.78963-4.11247%200-1.24588-.33786-2.39674-1.00832-3.45257-.65461-1.07695-2.32283-2.24365-4.99409-3.51065l-2.97745-1.38314c-2.52344-1.17726-4.28668-2.57096-5.295-4.18638-.99249-1.61543-1.48873-3.55816-1.48873-5.8282%200-2.75573.97665-5.04161%202.92466-6.85764%201.95329-1.81603%204.45562-2.72405%207.51753-2.72405%204.08608%200%206.92627.6599%208.52586%201.99025l-1.48873%204.38698c-.67573-.48568-1.69989-.95553-3.07775-1.40953-1.37786-.45401-2.65542-.68102-3.83268-.68102-1.71573%200-3.06719.48569-4.05968%201.46233-.97664.97665-1.4676%202.22781-1.4676%203.75877%200%20.93969.17949%201.8002.53319%202.57095.35371.77604.83939%201.4201%201.46233%201.94274.63878.52263%201.93218%201.25116%203.88547%202.19613l3.02496%201.43593c2.52344%201.1931%204.28668%202.62375%205.29501%204.28669%201.02943%201.6471%201.53623%203.75349%201.54151%206.3086%200%202.77156-1.11918%205.12607-3.35755%207.05825-2.21725%201.93217-5.1947%202.89826-8.92707%202.90354-3.27836%200-6.07632-.77604-8.39915-2.32283m48.66336-12.53275v14.22208h-5.04161V241.9495c3.81684-.16893%206.11856-.2534%206.91043-.2534%2010.72727%200%2016.0909%203.58983%2016.0909%2010.7695%200%208.30941-4.74069%2012.45884-14.22735%2012.45884-.57015%200-1.81604-.0792-3.73237-.24813m0-18.18673v13.64665l3.38394.24812c6.25054%200%209.38108-2.46009%209.38108-7.38555%200-4.50841-3.34171-6.76262-10.01458-6.76262-.67045%200-1.58903.0845-2.75044.2534m44.78317%2032.40881-9.86148-15.8639c-1.12975%200-2.90883-.0845-5.3478-.2534v16.1173h-5.04688V241.9495l3.91186-.17421c2.43897-.13726%204.21277-.20061%205.3214-.20589%208.87956%200%2013.31934%203.53176%2013.31934%2010.59529%200%202.31755-.71797%204.41338-2.14334%206.28221-1.43066%201.84771-3.13055%202.99856-5.09968%203.45257l10.72199%2016.99892zm-15.20928-32.40881v12.00483c1.20893.16893%202.38618.2534%203.53176.2534%203.02497%200%205.22638-.48568%206.60424-1.46233%201.38314-.97665%202.06943-2.71877%202.06943-5.2211%200-2.06943-.73908-3.55815-2.21725-4.46617-1.48344-.90802-3.81683-1.36203-7.01073-1.36203-.5068%200-1.49928.0845-2.97745.2534m29.78506-4.54008h5.04688v36.94889h-5.04688zm46.47775%2036.94889-4.387-23.72986-8.0718%2024.23666h-1.2617l-8.2989-24.23666-4.2866%2023.72986h-4.79354l6.91044-36.94889h2.2964l8.8004%2026.96071%208.1246-26.96071h2.2701l7.4911%2036.94889zm20.5888-32.40881v10.26798h12.2054v4.28669h-12.2054v13.31406h16.7455v4.54008h-21.7924V241.9495h22.0722v4.54008zm39.1028%2030.71948%201.8424-4.64039c.9397.69157%202.1064%201.27228%203.5054%201.74212%201.4095.45401%202.6712.68102%203.7799.68102%201.9691%200%203.5475-.53848%204.7459-1.61543%201.1931-1.07695%201.7897-2.44425%201.7897-4.11247%200-1.24588-.3379-2.39674-1.0084-3.45257-.6599-1.07695-2.3228-2.24365-4.9941-3.51065l-2.9774-1.38314c-2.5234-1.17726-4.2867-2.57096-5.295-4.18638-.9925-1.61543-1.4887-3.55816-1.4887-5.8282%200-2.75573.9713-5.04161%202.9246-6.85764%201.948-1.81603%204.4557-2.72405%207.5176-2.72405%204.086%200%206.9262.6599%208.5258%201.99025l-1.4887%204.38698c-.6757-.48568-1.6999-.95553-3.0778-1.40953-1.3831-.45401-2.6554-.68102-3.8379-.68102-1.7105%200-3.0672.48569-4.0544%201.46233-.9767.97665-1.4676%202.22781-1.4676%203.75877%200%20.93969.1795%201.8002.5332%202.57095.3537.77604.8394%201.4201%201.4623%201.94274.6388.52263%201.9322%201.25116%203.8802%202.19613l3.0302%201.43593c2.5235%201.1931%204.2867%202.62375%205.295%204.28669%201.0242%201.6471%201.5363%203.75349%201.5416%206.3086%200%202.77156-1.1192%205.12607-3.3576%207.05825-2.2172%201.93217-5.1947%202.89826-8.9271%202.90354-3.2783%200-6.0763-.77604-8.3991-2.32283m30.4924-35.25956h5.0417v36.94889h-5.0417zm29.0249%204.54008v32.40881h-5.0416v-32.40881h-11.7567v-4.54008h29.0829v4.54008zm24.1522%200v10.26798h12.2054v4.28669h-12.2054v13.31406h16.7455v4.54008h-21.7924V241.9495h22.0669v4.54008zM64.84929%20211.18252c48.61584-13.77863%2099.91351-21.14835%20152.93218-21.14835%2053.21396%200%20104.70176%207.42779%20153.47066%2021.30144l-1.2934%204.5612c-48.3572-13.75751-99.4067-21.12194-152.17726-21.12194-52.5805%200-103.44527%207.30636-151.63879%2020.96885zm171.30368-28.94568h-5.28444V0h5.28444zm-15.84806%200h-5.27916V0h5.27916zm-15.84806%200h-5.28444V0h5.28444zm-15.84278%200h-5.28444V52.82335h5.28444zm-15.84806%200h-5.27916V52.82335h5.27916zm95.07782%200h-5.2845V29.05126h5.2845z%22%20%2F%3E%0A%20%20%20%20%20%20%20%20%3C%2Fsvg%3E" frameborder="0"></iframe>
    <h1>World</h1>
</body>
</html>

Upvotes: 1

Guffa
Guffa

Reputation: 700322

You can .write() the content into the iframe document. Example:

<iframe id="FileFrame" src="about:blank"></iframe>

<script type="text/javascript">
   var doc = document.getElementById('FileFrame').contentWindow.document;
   doc.open();
   doc.write('<html><head><title></title></head><body>Hello world.</body></html>');
   doc.close();
</script>

Upvotes: 124

user
user

Reputation: 25728

You can use data: URL in the src:

var html = 'Hello from <img src="http://stackoverflow.com/favicon.ico" alt="SO">';
var iframe = document.querySelector('iframe');
iframe.src = 'data:text/html,' + encodeURIComponent(html);
<iframe></iframe>

Difference between srcdoc=“…” and src=“data:text/html,…” in an iframe.

Convert HTML to data:text/html link using JavaScript.

Upvotes: 39

Ayush Gupta
Ayush Gupta

Reputation: 5678

iframe now supports srcdoc which can be used to specify the HTML content of the page to show in the inline frame.

Upvotes: 61

ximo
ximo

Reputation: 390

In combination with what Guffa described, you could use the technique described in Explanation of <script type = "text/template"> ... </script> to store the HTML document in a special script element (see the link for an explanation on how this works). That's a lot easier than storing the HTML document in a string.

Upvotes: 6

Related Questions