CODEWITHSUNDEEP
javascripthtmlwysiwyg
Gooey
Gooey

Reputation: 51

Edit for iframe contents

Is there anyway I can edit the html content of an iframe inside a webpage?

I have the following code:

<iframe src="sample.html"></iframe>

I want to edit the contents of sample.html without literally touching the html code. And I want this editor to be embedded on the website. Thank you so much!

Upvotes: 5

Views: 11317

Answers (2)

user5127
user5127

Reputation: 157

You can use the Javascript fetch() function to pull the code from sample.html, then use that with the iframe element's srcdoc attribute.

Using an iframe makes it easy to display code from within a page. If it is too complicated or you are frustrated with it, you might be able to use fetch and embed the code in a div element which opens up more options.

Using the fetch function lets you pull code from a website hosted somewhere else too.

I have made a similar program, but it does not fetch code from anywhere, you start with a blank document (you can start with that and add fetch) -

data:text/html,Made by:&nbsp;&nbsp;<a href="https://meta.stackoverflow.com/users/28270403/user5127"><img src="https://meta.stackoverflow.com/users/flair/28270403.png?theme=clean" width="208" height="58" alt="profile for user5127 at Meta Stack Overflow, Q&amp;A about the site for professional and enthusiast programmers" title="profile for user5127 at Meta Stack Overflow, Q&amp;A about the site for professional and enthusiast programmers"></a><br><textarea id="text" style="width:50%; height:100%;"></textarea><iframe id="iframeParser" style="width:49%; height:100%;" srcdoc=""></iframe><script>var textarea = document.getElementById("text"); var iframe = document.getElementById("iframeParser"); </script><button onclick="iframe.srcdoc = textarea.value;">Parse</button><button id="toggleButton" onclick="toggleAuto()">Toggle automatic changes: off</button><button onclick="fullscreen()" id="fullscreenbtn">Enter Full Screen</button><script>var toggle=true; function toggleAuto(){if (toggle){toggle=!toggle; document.getElementById("toggleButton").innerHTML="Toggle automatic changes: on"; document.getElementById("text").setAttribute("onkeyup", "iframe.srcdoc = textarea.value;")} else {toggle=!toggle; document.getElementById("toggleButton").innerHTML="Toggle automatic changes: off"; document.getElementById("text").setAttribute("onkeyup", "void(0)")}}</script><button onclick="insertConsoleScript()">Insert console script</button><script>function insertConsoleScript(){textarea.value = `\<!--CONSOLE SCRIPT START--\>\n\<script\>console = {log: function(...args) {var array = []; for (var i = 0; i < arguments.length; i++){array[i] = arguments[i]}; var array = array.join(" "); alert("Log: " + array);}, warn: function(...args) {var array = []; for (var i = 0; i < arguments.length; i++){array[i] = arguments[i]}; var array = array.join(" "); alert("Warning: " + array);}, error: function(...args) {var array = []; for (var i = 0; i < arguments.length; i++){array[i] = arguments[i]}; var array = array.join(" "); alert("Error: " + array);}, debug: function(...args) {var array = []; for (var i = 0; i < arguments.length; i++){array[i] = arguments[i]}; var array = array.join(" "); alert("Debug: " + array);}, info: function(...args) {var array = []; for (var i = 0; i < arguments.length; i++){array[i] = arguments[i]}; var array = array.join(" "); alert("Info: " + array);}}\</script\>\n\<!--CONSOLE SCRIPT END--\>\n\n${textarea.value}`}</script><script>var fullscreentools = {toggle: false,btn: document.getElementById("fullscreenbtn")}; function fullscreen(){if (fullscreentools.toggle){document.exitFullscreen();fullscreentools.btn.innerHTML="Enter Full Screen";}else{document.documentElement.requestFullscreen();fullscreentools.btn.innerHTML="Exit Full Screen";}fullscreentools.toggle = !fullscreentools.toggle;}</script>

Just copy/paste it into your address bar like you put a URL in (not searching) and it will parse the HTML code.

Upvotes: 0

tskuzzy
tskuzzy

Reputation: 36446

You can access the document of the <iframe> like so:

iframedoc = document.getElementById("my_iframe").contentDocument;
iframedoc.getElementById("element_in_iframe").do_something();

Note that this only works if the iframe is on the same domain as your parent page.

Upvotes: 7

Related Questions