I have two HTML pages in the same application hosted in Tomcat. Inside one HTML page there is an iFrame. I need to load the other HTML page through this iFrame.
Below I have mentioned the controller.html
<html lang="en">
<head>
<meta charset="utf-8">
<title>postMessage Demo: Controller</title>
</head>
<body>
<h1>Controller Window</h1>
<p>
This document is on the domain: http://codepen.io
</p>
<p>
<button id="send">Send Message</button>
</p>
<iframe id="receiver" src="http://localhost:8080/playground/receiver.html" width="400" height="200">
<p>Your browser does not support iframes.</p>
</iframe>
<script>
var btn=document.getElementById("send");
btn.onclick = function () {
alert("tedt")
receiver.contentWindow.postMessage("hi", "*");
alert("oop")
}
</script>
</body>
</html>
receiver.html
<html lang="en">
<head>
<meta charset="utf-8">
<title>postMessage Demo: Receiver</title>
</head>
<body>
<h1>Receiver Window</h1>
<p>
This document is on the domain: http://demos.matt-west.com
</p>
<div id="message"></div>
<script>
message.onload = function () {
alert('It works!');
var mm=document.getElementById("message");
mm.innerHTML="asasasas";
}</script>
</body>
</html>
when the receiver gets the request it should display the alert 'It works' But it is not showing. Please help me to fix the issue.
Thanks
Google uses an X-FRAME-OPTIONS HTTP header to disallow putting their pages in iframes: https://developer.mozilla.org/en/The_X-FRAME-OPTIONS_response_header
Almost all modern browsers will refuse to put pages with this HTTP header in an iframe. There's nothing you can do about that.
Related
I made a page that allow 2 players to play game, I use 2 iframes to load 2 file .html of game, first iframe for player 1, second iframe for player 2.
But i have a problem that I want to play as player 2 I have to click on the iframe 2, and same with player 1; that mean I can only play one player at a time.
So you guys have any ideas about this? Is there any way to play 2 iframes at once? (I have set up different button for each player)
Here is the screen which i described above
You can use the function "parent".
Example are as below:
define:
main page: demo.html
sub page: a.html & b.html
demo.html
<!DOCTYPE html>
<html>
<body>
<iframe id="frame_A" src="a.html"></iframe>
<iframe id="frame_B" src="b.html"></iframe>
</body>
</html>
a.html
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function callBFun() {
parent['frame_B'].changeHiValue(document.getElementById('user').value);
}
function callDirect() {
parent['frame_B'].document.getElementById('hi').innerHTML =
'Control：====>' + document.getElementById('user').value;
}
</script>
</head>
<body>
<h1 style="color: red;">This is a.html</h1>
<input type="text" id="user" size="8"><input type="button" onclick="callBFun()" value="call function from b.html"><input type="button" onclick="callDirect()" value="call dom from b.html">
</body>
</html>
b.html
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function changeHiValue(value) {
document.getElementById('hi').innerHTML = 'By calling：==>>==>>' + value;
}
</script>
</head>
<body>
<h1 style="color: blue;">It's the b</h1>
The value from a.html：
<label id="hi" style="color: red;"></label>
</body>
</html>
Good luck;
Source.HTML
<!DOCTYPE html>
<html>
<body>
<h1 style="color:red">Hello World</h1>
<p id="demo" style="color:red">Click the button below to remove the style attribute from the header above.</p>
</body>
</html>
Parser.html
<!DOCTYPE html>
<html>
<body>
<button onclick="myFunction()">Parse</button>
<script>
function myFunction()
{
document.getElementsByTagName("H1")[0].removeAttribute("style");
document.getElementsByTagName("P")[0].removeAttribute("style");
};
</script>
</body>
</html>
Now what i need guidance for was , i need the Parse button from parser.html to apply the functions for source.html and save as output.html in same path of source.html...
Kindly help me out ...
What Willshaw said is correct. Javascript don't have that much power to solve your problem. You need to go for some serverside scripting.
I agree with the previous answer, it is a pretty strange way to do.
But, the DOM parsing being really easy with javascript, you could do the parsing on the client side, I guess, and then send the processed html to your backend, and save it in result.html.
I will use Jquery for the example, way easier.
Parser.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>load demo</title>
<style>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<button id="btnLoad">Load Source</button>
<button id="btnParse">Parse</button>
<button id="btnSave">Save</button>
<div style="display:none" id="sourceContainer"></div>
<script>
$(document).ready( function() {
$(".btnLoad").click(function(){$("#sourceContainer").load("/source.html");})
$(".btnParse").click(function(){
$(".sourceContainer h1").removeAttr("style");
$(".sourceContainer p").removeAttr("style");
})
$(".btnSave").click(function(){
var data = {
html: $("#sourceContainer").html()
};
//replace first param by the backend url, add callback function
$.post("http://...", data, ...);
})
});
</script>
</body>
</html>
I use the following html5 code to display a html page with an image(1.JPG). Its working fine. The image will be randomly overwritten with an another newer image in a certain interval in the same path provided. So, I use meta tag to refresh the page, so that whenever any newer image is overwritten in the path, the page will be refreshed with the updated image automatically. But, it looks like refreshing the page for every 5 secs fine, but its NOT displaying the newer image which has overwritten in the same path, it always shows with the initial image i kept. Could someone help me to fix this issue?
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
</style>
<meta http-equiv="refresh" content="5">
</head>
<body>
<canvas id="myCanvas" width="578" height="100"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.font = 'italic 30pt Calibri';
context.fillText('Screen sharing', 10, 50);
</script>
<p><img src = "file:////Users/Martin/Downloads/1.JPG" /> </p>
</body>
</html>
Meta tag Refresh URL, please try
<meta http-equiv="refresh" content="5; ,URL=http://domain.com">
OR You can do it from javascript
<script type="text/javascript">
setInterval(function(){
window.location.reload();
},5000);
</script>
And please use SERVER url to load image instead of file url
<p><img src = "file:////Users/Martin/Downloads/1.JPG" /> </p>
Change To
<p><img src = "http://domain.com/Downloads/1.JPG" /> </p>
I'm just trying to create a canvas in my browser with the following code :
<!DOCTYPE html>
<html lang="eng">
<head>
<title<abc</title>
<script type="text/javascript">
window.onload=canvasApp();
function canvasApp()
{
var canvas=document.getElementById("one");
if(!canvas||!canvas.getContext)
return;
}
</script>
<meta charset="utf-8">
<body>
<canvas id="one" width="400" height="500">
Your browser doesn't support canvas
</canvas>
</body>
</html>
Why i'm getting canvas=null in the following line
var canvas=document.getElementById("one");
(I'm using the latest versions of chrome and firefox)
Your HTML leaves somewhat to be desired.
Give the W3C Validator a go. Right now it reports 7 Errors and 4 warnings.
I would like to control the volume of an audio tag in a background page in a Chrome extension.
The media plays well but at a volume by default (I think it's 1 => max) however I can change the volume.
Do you know how to ?
Background.html:
<!doctype html>
<html>
<head>
</head>
<body>
<audio src="http://radio-contact.ice.infomaniak.ch/radio-contact-high.mp3" id="radio"
autoplay="true" oncanplay="document.getElementById('radio').volume = 0.1">
</audio>
</body>
</html>
Moreover, I want to have Pause/Volume+/Volume- buttons in a popup.html to control it.
I tried with chrome.extension.getBackgroundPage() but I can't control it.
Thanks
What have you tried? posting the code you used may help.
Anyway, here is a simple code i tired and seems to work
background.html
<html>
<head>
<script>
function controlVolume(passedVolume)
{
document.getElementById('radio').volume = passedVolume;
}
</script>
</head>
<body>
<audio src="http://radio-contact.ice.infomaniak.ch/radio-contact-high.mp3"
id="radio" autoplay="true" oncanplay="controlVolume(0.1);">
</audio>
</body>
</html>
popup.html
<html>
<head>
</head>
<body>
<input id="volume" type="text" />
<input type="button" value="change volume" onclick=
"
chrome.extension.getBackgroundPage().controlVolume
(document.getElementById('volume').value);
"
/>
</body>
</html>