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;
Related
I am looking to create a website that compiles the HTML code that you write it in a text editor.
Here is my code:
<!DOCTYPE html>
<html>
<head><title>HTML editor</title></head>
<body>
<textarea id="textarea">
</textarea>
<iframe id="frame" srcdoc="This is where the code is interpreted. ">
</iframe>
<button onclick="run();"></button>
<script>
function run() {
var x = document.getElementById("textarea").value;
var y = document.getElementById("frame");
y.srcdoc = x;
}
</script>
</body>
</html>
Write now, I have successfully created something that compiles html code. But I want to do the syntax highliting. How do I highlight the text?
Just add the required CSS and JS for Prism.js.
<!DOCTYPE html>
<html>
<head>
...
<link href="https://myCDN.com/prism#v1.x/themes/prism.css" rel="stylesheet" />
</head>
<body>
...
<script src="https://myCDN.com/prism#v1.x/components/prism-core.min.js"></script>
<script src="https://myCDN.com/prism#v1.x/plugins/autoloader/prism-autoloader.min.js"></script>
</body>
</html>
Then add below HTML element
<pre><code class="language-css">p { color: red }</code></pre>
whatever code you write in this element will have syntax highlighting. class="language-css" determines the language for hightlighting, you can change as per your requirement. You can find all supported languages here.
Note: this is a basic example you can start from here and find more info at prism.js usage
I know a iframe tag can access to parent element with same domain + ports.
However, what if parent and iframe has different domain + port ?
i.e.
parent's domain is http://aaa.com:63342, and iframe domain is http://aaa.com:9080.(Please note that they have different ports)
Both of pages have <meta http-equiv='X-Frame-Options' content='ALLOWAll'> in their headers.
first, parent frame call iframe with form submit. like...
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='X-Frame-Options' content='ALLOWAll'>
<title>ParentWindows with aaa.com:63342</title>
</head>
<body>
<form name='form' method='post' id='form' action=''>
<input type='text' name='greetings' value='Hello from the otherside'>
</form>
<script>
document.form.target = 'iframe';
document.form.action = 'http://aaa.com:9080//inFrame.jsp';
document.form.submit();
</script>
</body>
<iframe src="" name='iframe'></iframe>
</html>
Then a server returns like below in jsp
<%
response.setHeader("X-Frame-Options", "ALLOWAll");
String greetings = request.getParameter("greetings");
%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='X-Frame-Options' content='ALLOWAll'>
<title>iframe with aaa.com:9080</title>
</head>
<body>
<div>
greetings message : <%= greetings %>
</div>
</body>
<script>
var div = document.createElement('div');
div.textContent = 'Echo Hello';
parent.document.body.appendChild(div);
</script>
</html>
It is simple version of the situation what I am in. However, when I do like this, browser console shows error like..
Uncaught SecurityError: Blocked a frame with origin "http://localhost:9080" from accessing a frame with origin "http://localhost:63342". Protocols, domains, and ports must match.
Now I am doubting with this method(calling different hosts between iframe and parent) is possible at first place... Is it possible?
How can I make this works?
Thanks a lot
Detour to original frame.
something like...
original page with aaa.com:63342/original.html is
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='X-Frame-Options' content='ALLOWAll'>
<title>ParentWindows with aaa.com:63342</title>
<script>
function setGreetings(greetings){
document.getElementById('greetings').value = greetings;
}
</script>
</head>
<body>
<form name='form' method='post' id='form' action=''>
<input type='text' id='greetings' name='greetings' value='Hello from the otherside'>
</form>
<script>
document.form.target = 'iframe';
document.form.action = 'http://aaa.com:9080//inFrame.jsp';
document.form.submit();
</script>
</body>
<iframe src="" name='iframe'></iframe>
</html>
Then page(jsp) which imported into the original page(inside of iframe) looks like... I can call aaa.com:9080/inFrame.jsp
<%
response.setHeader("X-Frame-Options", "ALLOWAll");
String greetings = request.getParameter("greetings");
%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='X-Frame-Options' content='ALLOWAll'>
<title>iframe with aaa.com:9080</title>
</head>
<body>
<div>
greetings message : <%= greetings %>
</div>
<iframe id='iframe' src="http://localhost:63342/third.html?greetings=<%= greetings %>"></iframe>
</body>
</html>
This is the third frame aaa.com:63342/third.html, final
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='X-Frame-Options' content='ALLOWALL'>
<title>ACCESS TO TOP FRAME on localhost:63342</title>
</head>
<body>
<script>
function setGrandfather(){
var greetings = getParams()['greetings'];
window.top.setGreetings(greetings);
}
//parsing parameters
function getParams() {
var param = new Array();
var url = decodeURIComponent(location.href);
url = decodeURIComponent(url);
var params;
params = url.substring( url.indexOf('?')+1, url.length );
params = params.split("&");
var size = params.length;
var key, value;
for(var i=0 ; i < size ; i++) {
key = params[i].split("=")[0];
value = params[i].split("=")[1];
param[key] = value;
}
return param;
}
</script>
</body>
</html>
What happens here
the original page has iframe which has different domain
the second page(iframed in the original page) also has an iframe which has same origin with original page
the second page will send data to its iframe(the third page) with post/get. I wish it could access other frame element via parent.document or iframe.contentDocument.document, but these will be blocked by SAMEORIGIN policy.
In third page you can access functions and elements of the original frame since they have same origin(domain + ports).
CAUTION
frames can not communicate directly
only those pages has common url, possible to set sub domain via document.domain
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 have a page with many section like below.
When I travel from this page to anothe-page-2.html, it is possible when user click back button (from the browser) return and jump to <a name="test 2"></a> ?
try this any of two types...
<html> <head> <script>
function goBack() {
window.history.back() }
</script> </head> <body>
<input type="button" value="Back" onclick="goBack()">
</body> </html>
back
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>