I have an iframe, created like this:
<iframe id="frame"></iframe>
Now, I also have a string in my JavaScript:
var myString = `\
<html>\
<head>\
</head>\
<body>\
<h1>Hello World!</h1>\
</body>\
</html>\
`
I want to write the iframe code from this string. Ideally, in a perfect world, I would use something like this:
myFrame.write(myString); //Obviously this wouldn't work
How can I do this?
Thanks!
According to W3Schools you can do the same by other method like:
<iframe srcdoc="<p>Hello world!</p>" >
<p>Your browser does not support iframes.</p>
</iframe>
Here srcdoc attribute specifies the HTML content of the page to show in the inline frame.
Source: Link1
But You want answer to do the same from javascript
use the jquery and html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
function Iframecont(){
var myFrame = $("#myframe").contents().find('body');
var htmlcontent = '<h1>Hello</h1>';
myFrame.html(htmlcontent);
}
</script>
</head>
<body>
<iframe id="myframe" onload="Iframecont()"></iframe>
</body>
</html>
Related
I have small snippet that is inside iframe and generates script html tag and appends it to the window.top.document.head.
Now I want to know how do I check from within potato.js from which iframe it was generated from once it is already loaded?
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<iframe>
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script>
(function() {
var s = document.createElement('script');
s.setAttribute('type','text/javascript');
s.setAttribute('src','https://test.com/potato.js');
window.top.document.head.appendChild(s);
})();
</script>
</body>
</html>
</iframe>
</body>
</html>
Edit: I can not change this code inside the iframe
That information isn't stored automatically.
The only way I can think of would be to add an expando-prop to the script with a reference to the current window (i.e. the frame's window)…
s.sourceWindow = window;
… then read that from within potato.js …
const sourceWindow = document.currentScript.sourceWindow;
… and then loop over all the frames (window.frames) looking for a match.
Since you are using window.top and not window.parent you might need to be recursive there.
I have a very simple setup on a dev server (both pages are on my local test server localhost:5500) where I have a main page
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example Mockup</title>
</head>
<body>
<iframe src="./nested.html" id="frame"></iframe>
<script>
var iframe = document.getElementById('frame');
console.log(iframe.contentDocument.body);
</script>
</body>
</html>
and a nested page
<html>
<body>
<div id="hello">Hello, World</div>
</body>
</html>
when I load the main page in my browser the output written to console is: <body></body>
I can access the element #hello using iframe.contentDocument.getElementById('hello') but I want the body element including child elements. Can anyone please explain to me why is this happening
You have to wait until iframe loaded completely to access it's body.
var iframe = document.getElementById('frame');
iframe.onload = function () {
console.log(iframe.contentDocument.body);
}
I have a html file which contains iframe like below lines of code. Note that this iframe is displayed by one of tiny mce jquery and is rendered in browser as
below
<html>
<body>
<textarea id="texteditor"></textarea>
<div class="mceeditor">
<iframe>
<html>
<body>
<script type="text/javascript">
function mySubmit() {
var URL = "http://localhost:61222/14CommunityImages/hands.png";
window.document.getElementById("texteditor").value = URL;
}
</script>
</body>
</html>
</iframe>
</div>
</body>
</html>
Now my goal is to append var url inside text area which is in parent html tag.
Please help me !!!
The document in the iframe can access its parent window via parent, and its parent window's document via parent.document. So:
parent.document.getElementById("texteditor").value = URL;
Note: To access each-other's documents, the main document and the iframe must be on the same origin. If they're on different origins, they can still communicate, but only if they both do so expressly, via web messaging.
Side note: Your iframe, as shown in the question, won't work. Inline content in iframes is for display when the browser doesn't support iframes. You use a separate resource (e.g., page) identified by the src attribute (or you use the srcdoc attribute; I have no idea how well supported it is), for the iframe's content.
E.g.:
Main page:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Main Page</title>
<body>
<textarea id="texteditor"></textarea>
<div class="mceeditor">
<iframe src="theframe.html"></iframe>
</div>
</body>
</html>
theframe.html:
<!doctype html>
<html>
<body>
<input type="button" value="Click to set" onclick="mySubmit()">
<script type="text/javascript">
function mySubmit() {
var URL = "http://localhost:61222/14CommunityImages/hands.png";
parent.document.getElementById("texteditor").value = URL;
}
</script>
</body>
</html>
I'm trying to inject a javascript into a iframe, but nothing works. I've already spent days with this issue, would be great if someone could give me some hints.
Example of subject:
The example.html:
<html>
<head>
</head>
<body>
<iframe src="http://example.com/test.html" id="myFrame">
</iframe>
</body>
</html>
The test.html:
<html>
<head>
</head>
<body background="./bg.jpg">
<p >Text </p>
<p >(<i>Something</i>)<br><img src="./img1.gif" align="left">Text</p>´
</body>
</html>
Desired Output from test.html:
<html>
<head>
<script type="text/javascript"> src="myscript.js</script>
</head>
<body background="./bg.jpg">
<p >Text </p>
<p >(<i>Something</i>)<br><img src="./img1.gif" align="left">Text</p>´
</body>
</html>
I've tried this, but it doesn't work:
The example.html:
<html>
<head>
<script type="text/javascript">
var rawframe = document.getElementById('myFrame');
var doc = rawframe.contentDocument;
if (!doc && rawframe.contentWindow) {
doc = rawframe.contentWindow.document;
}
var script = doc.createElement('script');
script.type = "text/javascript";
script.src = "myscript.js";
document.body.appendChild(script);
</script>
</head>
<body>
<iframe src="http://example.com/test.html" id="myFrame">
</iframe>
</body>
</html>
Thank you all for the help.
Unfortunately, I don't believe this is possible. I know I tried something along these lines before, but due to security reasons, browsers prevented it.
You are appending script to the document of the parent page, not to the frame page.
I'm not sure if this can be achieved at all, but one problem I see is timing.
You would run the javascript code before the content of iframe is loaded, right?
I have a HTML element
<frame src="#" title="Content Frame" name="content" id="content" />
I want to set it's "src" dynamically using Javascript on page load. How can I do that ?
I am trying something like;
document.getElementById('content2').contentWindow.location = 'xyz_frame.html';
But for some reason it is not working..Again it is a element and not
A Rough code;
<html>
<head>
<script language="javascript">
function LoadPage(){
document.getElementById('content2').src = 'ipad_lrd_frame.html';
}
</script>
</head>
<body onload="LoadPage()">
<frame id="content2"></frame>
</body>
</html>
This should work;
document.getElementById('content2').src = "url";
(Also you have mismatched IDs for the frame and getElementById call)
For a FRAME, you need a FRAMESET which precludes the use of a BODY, so;
<frameset rows="50%,*" onload="LoadPage();">
<frame id="content2"></frame>
.....
Update:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<script type="text/javascript">
function LoadPage(){
document.getElementById('content1').src = "http://www.google.com";
document.getElementById('content2').src = "http://www.bing.com";
}
</script>
<title></title>
</head>
<frameset rows="50%,*" onload="LoadPage();">
<frame src="#" id="content1">
<frame src="#" id="content2">
</frameset>
</html>
I would think fetching frames by name would be more suitable:
document.getElementsByName('content2')[0].src = 'ipad_lrd_frame.html';
Tested it successfully. Ensure your page uses a frameset doctype and you do not include body tags (use frameset tags instead). Also note your script type should be text/javascript, rather than language "javascript".