Feasible: Embedding my complete website using custom HTML code into an iframe

I have the HTML for a website saved in a JavaScript string and I want to display it within an iframe. How can I insert this HTML string into the iframe and make the website appear? I have attempted to use this.src = HTML_STR; this.innerHTML = HTML_STR; but they do not display the HTML_STR.

I realize that this may seem unnecessary because instead of storing the website's HTML in a string, I could simply set the iframe's source to the website and display it that way.

HOWEVER, the reason for doing this is because it's a website updater. I want to retrieve the HTML of the website I am updating, convert all elements with the class "updatable" to textareas (so they can be updated), and then display that HTML in the iframe.

Another reason for using an iframe instead of just inserting the HTML into a div is because each website imports a .css stylesheet. I do not want their CSS to interfere with my updater website's CSS or vice versa. By displaying each website in an iframe, their CSS will not affect each other.

For instance, if updater.css contains the following, it will impact all the p elements in the other websites' HTML:

p { background-color: red; width: 50%; }

Therefore, is there a way to insert my own HTML into an iframe? Or is there another method to achieve what I am attempting to do.

javascripthtmlcssiframe

Answer №1

If you need to write to the iframe from the parent, the following code can help you achieve that:

var iframe = document.getElementById('myFrame');
iframe = (iframe.contentWindow) ? iframe.contentWindow : (iframe.contentDocument.document) ? iframe.contentDocument.document : iframe.contentDocument;
iframe.document.open();
iframe.document.write('Hello World!');
iframe.document.close();

View a working example on jsFiddle. The original code was referenced from here and here.

Answer №2

If you're looking to insert dynamic content into an iframe, consider using the document.write(yourHTMLString); method.

Alternatively, you can use JavaScript to swap out editable elements with textareas in the main HTML document when a specific button is triggered.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Improve the performance of my website and resolve the zooming problem

Trying my hand at teaching myself jquery and creating a decent layout. I believe what I have done is acceptable, but I still have some questions. This is my first attempt at jquery without copying someone else's work. I've aimed to keep it relev ...

jqueryhtmlcss

After a period of time since the server has been initialized, the function req.isAuthenticated() no

In my Node.js routes.js file, I have a function implemented to check if a request is isAuthenticated before serving it: function isLoggedIn(req, res, next) { if (req.isAuthenticated()) { console.log('Session Expiry '+req.session.cook ...

javascriptnode.jsexpresssession-cookiespassport.js

Strategies for managing the "ref" property of Material-UI component props within our custom components

I have a unique custom component setup as shown below: // ... import { PaperProps, styled } from '@mui/material'; type ComponentProps = PaperProps & { a: string, b: string }; export const MyPaper = styled(Paper)(/* ... */); const Compo ...

javascriptreactjstypescripttypesmaterial-ui

creation of cascading drop-down lists

I have been struggling to create a dependent dropdown list using ajax and php, but unfortunately I am not getting the desired outcome. Below is my ajax code: <html> <head> <title>findperson</title> <script type="text/javascript ...

javascriptphpmysqlajax

Conceal an element from view upon clicking on it

Task at Hand : Implement a smooth element hiding effect upon clicking, similar to the behavior on this website , where the letter A fades away smoothly when clicked. Is it possible to achieve this effect using only HTML, CSS, and JavaScript? var t ...

javascripthtmlcssanimationhide

The email verification process is experiencing technical difficulties

Having trouble displaying error message when emails do not match I am relatively new to PHP and could use some assistance. The $email variable captures the user's email input, while the $VerifyEmail variable does the same for email verification purp ...

phphtmlxampp

Updating image URL for grouped objects with Fabric JS

Check out this link :http://jsfiddle.net/mishragaurav31/ang58fcL/#base I created two groups of objects; one consisting of a circle and text, and the other with two images. When I try to change attributes for group 1, it works fine. However, when attempt ...

javascripthtmlfabricjs

The Material UI component successfully loads the options data list from the server response, however, it fails to return the selected value when an option

My goal is to dynamically populate my country and province select component based on server response data. The process begins with the user selecting a country, which triggers a request to the server using the selected country's id. The server respond ...

javascriptreactjsmaterial-ui

Choosing the number of items for each cartItem in KnockoutJS: A comprehensive guide

Greetings! I am new to using knockout and I am attempting to automatically select the quantity for each item in my cart from a dropdown menu. Below is the code I have written: VIEW <div data-bind="foreach: cartItems"> <h3 data-bind="text: ful ...

javascriptjqueryknockout.js

Dynamic SVG positioning

Looking for a way to make this svg shape relative to its containing div? Fiddle: http://jsfiddle.net/8421w8hc/20/ <div> <svg viewBox="0 0 1000 2112" style="" xmlns="http://www.w3.org/2000/svg" version="1.1"> <path id="ma" st ...

javascriptcssxmlsvg

Exploring custom JavaScript with Construct 2's generated code

How can I access the score of a game user in Construct2 Engine using external JavaScript? Is there a method to achieve this? Appreciate any guidance on this matter. ...

javascriptphpvariablesscopeconstruct-2

Issue with Google Maps functionality within the jQuery easytabs platform

Upon clicking the contact tab, the gmaps loads but unfortunately only shows the left corner of the map. Quite intriguing... Any thoughts on how to fix this? Here is the corresponding jsfiddle This is the structure of my HTML code: <div id="menu-contai ...

jqueryhtmlcssgoogle-maps

The video attribute in HTML is malfunctioning on the react webpage

Currently working on setting up a basic portfolio layout with a video playing in the background on loop. However, despite making some adjustments and modifications, the video is not showing up as expected. Any insights or suggestions on what might be causi ...

javascripthtmlcssreactjshtml5-video

Having trouble getting datatables.net to function properly with JavaScript

I've been experimenting with datatables from http://datatables.net/ Attempting to make it work using javascript, but I'm facing issues. Even when following the example provided on the website, it still shows a blank page. Does anyone have any su ...

javascripthtmldatatables

Determine the number of items (within an array) that were created within the past few days, weeks, and months leading up to the 'current time'

Having an array filled with objects containing timestamps: Here is a glimpse of the data: const dataList = [ { _id: "602102db3acc4515d4b2f687", createdDt: "2021-02-08T09:22:35.000Z", }, { _id: "6021024da706a260d89 ...

javascriptnode.jsreactjsmomentjslodash

Having trouble configuring bcryptjs in a React.js project

I have been working on setting up a single registration page within a react component. However, I encountered an issue when trying to hash the password before sending the response to my back-end. I am puzzled as to why the code snippet below is not functi ...

javascriptreactjsbcrypt

Click to reveal the hidden div located at the bottom of the webpage

I have created a simple webpage where all the content is visible without the need to scroll down. However, there is additional content at the bottom that I want to keep hidden until the user chooses to see it. The idea is to have a phrase at the bottom o ...

javascriptjqueryhtmlcssshow

Push the accordion tab upwards towards the top of the browser

I am working on an accordion menu that contains lengthy content. To improve user experience, I want to implement a slide effect when the accordion content is opened. Currently, when the first two menu items are opened, the content of the last item is disp ...

javascriptjquerycssaccordion

What are some of the potential drawbacks of utilizing the same template ref values repeatedly in Vue 3?

Is it problematic to have duplicate template ref values, such as ref="foo", for the same type but different instances of a component across views in a Vue 3 application? Let's consider the following example pseudocode: // ROUTE A <te ...

javascriptvue.jsvuejs3vue-reactivity

Middleware in Express not producing results

Here is the code I am currently using: var express = require('express'); var app = express(); app.use(express.bodyParser()); app.use(express.cookieParser()); var port = Number(process.env.PORT || 5000); app.get('/test/:id', function(r ...

javascriptnode.jsexpress