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".
Related
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>
I'm working on a ancient project which is based on and tags.
Here's the common HTML structure of the parent page (index.html):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
</head>
<frameset rows="75px,*" frameborder="0">
<frame name="frame1" src="frames/frame1.html">
<frameset class="child_frameset">
<frame name="frame3" src="frames/frame3.html">
</frameset>
</frameset>
</html>
Here how I specify the javascript function on the child frame (frame3.html):
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript">
function helloWorld(){
alert('hello world!');
}
</script>
</head>
<body>
<h1>I'm frame 3</h1>
</body>
</html>
My task is to call helloWorld() function. How do I do that?
Thanks in advance!
You can do it like this:
document.getElementById('frame3').contentWindow.helloWorld();
You can call method from childframe
window.frames[n].frames[m].methodName()
where n , m are integers starting from 0.If you have document
only one frame remove the frames[m] part and get the job done.
Ya one more thing , do trial an error and find out exact frame numbers
and method.
Hope this helps
Check for contentWindow, contentDocument and get the frame object and perform call.
var siblingFrame;
if (parent.document.getElementById('siblingFrameId').contentWindow){
siblingFrame = parent.document.getElementById('siblingFrameId').contentWindow;
} else if (parent.document.getElementById('siblingFrameId').contentDocument){
siblingFrame = parent.document.getElementById('siblingFrameId').contentDocument;
} else if (parent.document.getElementById('siblingFrameId')) {
siblingFrame = parent.document.getElementById('siblingFrameId');
}
siblingFrame.helloWorld();
I know it is possible to load the content of an html document in another html document (call it "master.html") using iframe; i.e.:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<body>
<h1>Sample code</h1>
<p>Sample code</p>
<iframe src="files\file_1.html"
name="targetframe"
allowTransparency="false"
height = 500
width = 1200
frameborder="0" >
</iframe>
</body>
</html>
In this case, I loaded "file_1.html" from the directory "files." Let's say I have 100 .html documents in "files," all with differing names (i.e., "file_1.html," "something_else.html", "something_random.html").
Is there a way that I can load all the .html documents contained in "files" consecutively into "master.html?"
Thanks so much for your responses!
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 need to pass data from a web page to an iFrame hosted in that web page. I used window.postMessage. however the iFrame does not receive the event.
Here is my code snippet.
Parent page:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Test event listener</title>
</head>
<body>
<script type="text/javascript">
function SendMsgToIFrame() {
alert("In Parent window ");
var myiframe = document.getElementById('myIframe');
if (myiframe.contentDocument) {
myiframe.contentDocument.postMessage('Post Message from Parent', '*');
}
else if (myiframe.contentWindow) {
myiframe.contentWindow.postMessage('Post Message from Parent', '*');
}
</script>
<button type="button" onclick="SendMsgToIFrame()">Push to iframe</button>
<div id="iframeDiv">
<iframe id="myIframe" src="http://localhost:50000/Receiver.htm" width="500" height="200" frameborder=10>
</iframe>
</div>
</body>
</html>
Code snippet for Receiver.htm is:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Got Text</title>
</head>
<body>
<script type="text/javascript">
window.attachEvent("onMessage", myhandler);
function myhandler(mobj) {
alert("I am in iFrame");
var message = mobj.data;
alert("data: " + message);
}
</script>
<input type="text" name="text1" id="text1" value="text here" />
</body>
</html>
I am running the parent page on Tomcat (localhost:8080). The iFrame is running on my HTTP server I built using the httplistener.
When I run the parent page and hit the button that generates the event, I do not get the alert "I am in iFrame". Looks like the iFrame is not receiving the event at all. What am I missing here?
Any help is very much appreciated. Thanks!
Your code has some strange parts. You're using attachEvent where it's better to use addEventListener and you should probably post to contentWindow, not document.
The problem with my code was this:
window.attachEvent("onMessage", myhandler)
onmessage should be all lower case.
Once I changed this line to the below, it worked.
window.attachEvent("onmessage", myhandler)
I posted the answer here: javascript cross domain iframe resize
And that link also has a link to sample working code on github.