I have an html page with iframe in it. There is a website in the iframe. The domains of the website and the web page are the same. I want to get background-color of the website in the frame from the web page. How can I do that?
For example, I want to get the background color of the website in iframe from the html page below.
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<iframe id="my-iframe" frameBorder="0"
src="https://MYWEBSİTE.COM (Same domain)" title="My Website">
</iframe>
</body>
</html>
You can access it with JavaScript using .getComputedStyle() of the iframe's body by selecting .contentWindow.document.body then selecting the body's background color.
var iFrameEl = document.getElementById('my-iframe');
var backgroundColor = iFrameEl.contentWindow.getComputedStyle(iFrameEl.contentWindow.document.body).backgroundColor;
Related
I have this code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
function resizeiframe() {
var Lyrics = document.getElementById("Lyrics");
Lyrics.height = Lyrics.contentWindow.document.documentElement.scrollHeight;
}
</script>
</head>
<body>
<iframe id="Lyrics" src="X-Raym_Lyrics.html" scrolling="auto" title="Lyrics" width="100%"></iframe>
</br>
<button type="button" id="resizeiframebutton" onclick="resizeiframe()" title="Resize">Resize</button>
</body>
</html>
When i inspect the tag body (or html tag doesnt matter is an example) from X-Raym_Lyrics.html in chrome opened outof iframe i see that my script arent able to pickup a real value of height of the content to the height of iframe.
Is there a way to pickup the real height of the web page.
You can use the following JavaScript code to get the actual height of the iframe content:
var iframe = document.getElementById('yourIframeID');
var iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
var height =iframeDoc.body.scrollHeight;
Some resources:
HTML DOM contentDocument Property: https://www.w3schools.com/jsref/prop_frame_contentdocument.asp
HTML DOM contentWindow Property: https://www.w3schools.com/jsref/prop_frame_contentwindow.asp
HTML DOM scrollHeight Property: https://www.w3schools.com/jsref/prop_element_scrollheight.asp
Don't forget the vote :)
I tried to set margin-top during printing preview (chrome browser) to a minimum size that could remove page header text (date time, url), but at any size, the header won't be removed.
I have one html file iframe.html that is an iframe referent to another html file print.html which contain printing button.
iframe.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div class="container">
<div class="row">
<iframe src="print.html" frameborder="0"></iframe>
</div>
</div>
</body>
</html>
print.html is a page I would to print its content, and want to remove header text.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>
<!-- Include BS and FA -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<style>
#media print {
#page {
margin-top:0.5cm;
}
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<p>Hello Please press button print to preview</p>
<button>Print</button>
</div>
</div>
<script>
$(document).ready(function(){
$('button').click(function(){
window.print();
})
})
</script>
</body>
</html>
In print.html, I set margin-top of #page to a minimum size 0.5cm I supposed it to removed header page, yet on print preview the content of print.html overlaps the header text.
Here it looks like on print preview:
I wonder if there's any css hack I would remove page header print preview during printing, currently I'm using chrome browser.
Edited
The suggested answer above does not apply to my current problem as I tested solution from there already. The difference is I am print page from iframe rather from page alone. If I run file print.html alone the magin-top style could remove page header fine, however the problem is when press print button from Iframe, that does not work.
Assume i have iframe contain sample.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="import" href="sample.html">
</head>
<body>
<p>top</p>
<iframe src="sample.html" frameborder="0" id="myframe"></iframe>
<p>bottom</p>
<textarea cols="30" rows="10"></textarea>
</body>
</html>
I want to get all content include <!DOCTYPE html> ...</html>. I try to search arround the web but what i found only get content from body using
var cont = document.getElementById('myframe').contentWindow.document;
console.log(cont.body);
I don't want to use AJAX to get content file.
How to get ALL content from iframe include html tag?
Try accessing cont.documentElement.innerHTML to get the contents of <html> tag.
If you want also the <html> tag, use cont.documentElement.outerHTML.
To get the doctype information, try using cont.doctype.
var cont = document.getElementById('myframe').contentWindow.document;
console.log(cont.documentElement.outerHTML, cont.doctype);
You could also use XMLSerializer if its supported in the browser:
console.log(new XMLSerializer().serializeToString(cont));
try this:
Using document.doctype to get the document doctype
Using document.getElementsByTagName("*"); to get most of the html
https://jsfiddle.net/4hhf6nLm/
following line will retrieve inner html of iframe
document.getElementById('myframe').contentWindow.document.body.innerHTML
Check this answer for more information
I have some links (like first link in below) and want to get links that is redirected to (like second one)
For example:
I have link below:
http://dx.doi.org/10.1007/146.1435-5655
And need to get this link:
http://link.springer.com/journal/146
that redirect (or converted) from first one.
When I use .load() function in jQuery it return some javascript codes that I think it get second link from dx.doi.org server.
How can I get second link? (http://link.springer.com/journal/146)
In other word, I have http://dx.doi.org/10.1007/146.1435-5655 and need only http://link.springer.com/journal/146 in string (not content of http://link.springer.com/journal/146)
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div id="swPicForm">TODO write content</div>
<script type="text/javascript" src="js/jquery/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$("#swPicForm").load("http://dx.doi.org/10.1007/146.1435-5655", null, function() {
alert($("#swPicForm").html());
});
</script>
</body>
</html>
Result is:
function (e){return v.access(this,function(e){var n=this[0]||{},r=0,i=this.length;if(e===t)return n.nodeType===1?n.innerHTML.replace(ht,""):t;if(typeof e=="string"&&!yt.test(e)&&(v.support.htmlSerialize||!wt.test(e))&&(v.support.leadingWhitespace||!pt.test(e))&&!Nt[(vt.exec(e)||["",""])[1].toLowerCase()]){e=e.replace(dt,"<$1></$2>");try{for(;r<i;r++)n=this[r]||{},n.nodeType===1&&(v.cleanData(n.getElementsByTagName("*")),n.innerHTML=e);n=0}catch(s){}}n&&this.empty().append(e)},null,e,arguments.length)}
thanks all
I'm trying to headlessly test a website that our team built using RequireJS. Basically we load all the content dynamically via requireJS then use JS to respond to events and dynamically render content.
When I point phantom JS to our server and render a screen shot, I get a white screen, javascript is enabled because when i point it to www.enable-javascript.com I get the message "Javascript is enabled".
Here is our page HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>test </title>
<base href="/">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="page"></div>
<script src="lib/es5-shim/es5-shim.js"></script>
<script src="lib/es5-shim/es5-sham.js"></script>
<script src="lib/require.js"></script>
<script src="config/require.js"></script>
<script>
require(['app/boot']);
</script>
</body>
</html>
Phantom JS:
var page = require('webpage').create();
page.open("http://localhost:4567/", function (s) {
page.render('test.png');
phantom.exit();
});