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();
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 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 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.
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".