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!
Related
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 am trying to write a tampermonkey script that extract a website from the following html page:
<html>
<head></head>
<body>
<iframe src="http://some-url.com/ll" title="test" name="ws_block" frameborder="0" scrolling="no" style="border:0px; width:100%; height: 320px;">
<html>
<head>
<!-- A particular character set can be specified by assigning "charset" -->
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Title</title>
<link rel="stylesheet" href="/en/Custom/blockStyle.css" type="text/css">
</head>
<body>
<div class="wrapper">
<div id="logo"><img src="/banner.gif" alt="[ORG]" border="0"></div>
<div class="block-body">
<div class="textLine">
<div class="ws-label label" data-strid="url"><script> ws.print("url"); </script>Address:</div>
<div class="text">https://www.my_website.com/</div>
</div>
<div class="textLine">
<div class="ws-label label" data-strid="category"><script> ws.print("category"); </script>Category:</div>
<div class="text">My-Website</div>
</div>
</div>
</div>
</body>
</html>
</iframe>
</body>
</html>
I am trying to extract my website link:
https://www.my_website.com/
The window object has a frames array with all the iframes contained in your page, so you can iterate it and try to get your content.
If you only have an iframe then window.frames[0].getElementsByClassName(classname) will do the trick.
Please have a look at its documentation at MDN
There are lots of different methods to find an element in the DOM that don't involve using their ID.
You need to find some other identifying feature of the element and use that.
For example:
document.querySelector("iframe");
… will return the first iframe in the document.
After that, you would use exactly the same method as you would use if you had got the iframe by the id.
You cannot access into other origin (domain) iframes by javascript for security reasons!
You should do it by server side languages like php!
if the domain and iframes src are in one origin you can use like r1verside's answer:
window.frames[0].getElementsByClassName(classname)
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>
page1.html
<!DOCTYPE html>
<html>
<head>
<script src="common_script.js"></script>
</head>
<body onload="init()">
<h1>My First Page</h1>
<p id="demo">This is a paragraph.</p>
</body>
</html>
page2.html
<!DOCTYPE html>
<html>
<head>
<script src="common_script.js"></script>
</head>
<body>
<h1>My second Page</h1>
<div id="nextpageId">I want to access my div</div>
</body>
</html>
common_script.js
function init() {
alert($("#nextpageId").text());
}
In the following code I have two pages i.e. page1.html & page2.html and these contain the common JavaScript file.
My problem is to access page2.html div#id when page1.html is loading.
use this in your javascript
$('body').attr('unique_id')
and give unique id for your page in body tag
<body id='unique_id'>
or you can also pass in url
or use this code
function init() {
alert( $('div').attr('id') == "nextpageId" )
}
You don't explicitly state that you are using jQuery Mobile but you have tagged your question as such and are using PhoneGap so I will assume so...
Your pages don't conform to a standard jQuery Mobile layout. They are missing the required data-roles. Specifically data-role="page" along with child data-role="content" declarations.
http://jquerymobile.com/demos/1.2.0/docs/pages/page-anatomy.html
Your second page will be loaded via Ajax and the <script> tag on the second page will be ignored. In fact, only the contents of the nested <div data-role="page"> section will be loaded.
To pull that markup, you can simply access the <div> given its ID and that ID should be unique. You can use the pageinit or pageshow events to control your timing on the Ajax load.
http://jquerymobile.com/demos/1.2.0/docs/api/events.html
I have a web page which embeds another page in an iframe. I want a JavaScript function in the outer document to fetch the size, in pixels, of the document in the iframe.
I have been exploring the DOM and the only attributes I can find relating to width and height give the height of the iframe itself, which is smaller than the document inside it.
e.g.
<iframe src="tall_page.php" id="my_iframe" style="height: 101px"></iframe>
...
var i = document .getElementById ("my_iframe");
i = i .contentDocument .body;
alert (i .offsetHeight); // or scrollHeight or clientHeight
The above will give "101". The value I am after is the size of the whole content document, not the frame -- and not just the <body>: if the CSS gives html{padding:x} for example, I want this to be inorporated.
How do I get this value?
Using jQuery this should work:
var height = $("my_iframe").height();
var width = $("my_iframe").width();
Hope that helps
I got it to work using the contentWindow object.
I think the idea here is to get the width/height of an
element that you set inside the iframe. In my example,
I set the iframe body to 3000px using css, and got it to work.
Keep in mind that since you're accessing an iframe's data,
you need to adhere to the same origin policy
Here is my example:
iframe.html
<!DOCTYPE html>
<html lang='en'>
<head>
<title>My Iframe</title>
</head>
<body id='mybody' style='width:3000px;'>
Hello!
</body>
</html>
index.html
<!DOCTYPE html>
<html lang='en'>
<head>
<title>My Test</title>
<script>
window.onload = function() {
var f = document.getElementById('myiframe');
console.dir(f.contentWindow.document.getElementById('mybody').clientWidth);
}
</script>
</head>
<body>
<iframe id='myiframe' src='iframe.html' height='480' width='640'>
</iframe>
</body>
</html>
Hope that helps.