How to access sibling frame data in HTML? - html

I have the following HTML files
INDEX.HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<title>This is a frameset with OBJECT in the HEAD</title>
</head>
<frameset cols="50%,50%">
<frame src="bianca.html" name="bianca"></frame>
<frame src="second.html" name="second"></frame>
</frameset>
</html>
BIANCA.HTML
<!-- In bianca.html -->
<html>
<head>
<title>Bianca's page</title>
</head>
<body>
...the beginning of the document...
<p id="test">
<script type="text/javascript">
console.log(window.parent.bianca.document.getElementById("test"));
console.log(window.parent.second.document.getElementById("test1"));
</script>
...the rest of the document...
</p>
</body>
</html>
SECOND.HTML
<!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>
</head>
<body>
<h1 id="test1">From second frame</h1>
</body>
</html>
The output(as logged in the console)is :
<p id="test">...</p>
undefined
Why is the second line undefined, however if i change the order of the frames in index.html as:
<FRAME src="second.html" id="second" name="second"></FRAME>
<FRAME src="bianca.html" id="bianca" name="bianca">
then correct output(as expected) is logged. Why is it not working in the first case?

Related

Embedding non-native HTML file in iframe tag

This is an example:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
</head>
<body>
<iframe width="200" height="200" src="https://www.dl.dropboxusercontent.com/pages.html/dl=1"></iframe>
</body>
</html>
I want the tag to work as a file

Adding additional stylesheets/scripts to a grails layout from a view or controller

I want to use a grails layout to define a common layout for all pages in the application. Currently it looks something like this:
<!DOCTYPE html>
<html lang="dk">
<head>
<meta charset="UTF-8">
<title><g:layoutTitle default="Title"/></title>
<asset:stylesheet src="css/default.css"/>
</head>
<body>
<header><h1><g:layoutTitle default="Title"/></h1></header>
<main></main>
<footer></footer>
</body>
<asset:javascript src="jquery-3.4.1.min.js"/>
</html>
Some views may require additional stylesheets or scripts over the defaults provided in the layout, but if I simply add these to the view, they do not appear:
<%# page contentType="text/html;charset=UTF-8" %>
<!DOCTYPE html>
<html lang=\"dk\">
<head>
<meta name="layout" content="index" />
<asset:stylesheet src="css/additional.css"/>
</head>
<body>
<main>${content}</main>
</body>
<asset:javascript src="js/extra.js"/>
</html>
Is there no simple clean way to do this?
Check out: http://docs.grails.org/3.1.1/ref/Tags/layoutBody.html
Example decorated page:
<html>
<head>
<meta name="layout" content="myLayout" />
<script src="myscript.js" />
</head>
<body>Page to be decorated</body>
</html>
Example decorator layout:
<html>
<head>
<script src="global.js" />
<g:layoutHead />
</head>
<body><g:layoutBody /></body>
</html>
Results in:
<html>
<head>
<script src="global.js" />
<script src="myscript.js" />
</head>
<body>Page to be decorated</body>
</html>

HTML on HTML lIke ReactJs JSX?

How to include the content on an html file, that is on the same folder, on the body of an other html file.
index.html | Ex:
<!DOCTYPE HTML>
<html>
<head>
<meta property="mymeta" content="Lot of meta" />
<title>Some cool title</title>
...
</head>
<body>
! Include content.htm here !
</body>
</html>
content.htm | Ex:
<div></div>
<h1></h1>
<img src="https://404.com" />
...
You can either use <embed> tag. more info here:
<!DOCTYPE HTML>
<html>
<head>
<meta property="mymeta" content="Lot of meta" />
<title>Some cool title</title>
...
</head>
<body>
<embed type="text/html" src="content.html" width="500" height="200">
</body>
</html>
or you can use <iframe>:
<!DOCTYPE HTML>
<html>
<head>
<meta property="mymeta" content="Lot of meta" />
<title>Some cool title</title>
...
</head>
<body>
<iframe src="content.html" width="500" height="200">
</body>
</html>

Can't display content in a frame

I have a MVC application which I'm trying to display through an iframe.
I get following error message:
This content cannot be displayed in a frame
I've googled some and found that I should use a meta tag. I've used it in my shared layout page in my MVC project but its still not working.
<meta http-equiv="X-Frame-Options" content="allow">
Rendered HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
<meta name="viewport" content="width=device-width"/>
<meta http-equiv="X-Frame-Options" content="allow">
</head>
<body>
</body>
</html>
My iframe:
<asp:Content ID="Content1" ContentPlaceHolderID="MainRegion" runat="server">
<div>
<input type="hidden" name="nSystemId" value="<%= strSystemId %>" />
</div>
<iframe src="http://myServer/Project/Controller/" seamless="seamless" frameBorder="0" height="600" width="400"></iframe>
</asp:Content>

how to get the value of <input type=" text"> in html

This is the code I used to create frames but not able to do so:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>MATERIALS</title>
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8"/>
<link href="projectstyle.css" rel="stylesheet" type="text/css"/>
</head>
<body link="blue" vlink="purple" alink="red" background="" bgcolor="#90EE90" text="white">
<frameset cols="50%,*">
<frame src="file:///C:/Users/Administrator/Desktop/WEB/frame2.html" />
<frame src="file:///C:/Users/Administrator/Desktop/WEB/frame1.html" />
</frameset>
</body>
</html>
The frameset tag does not work inside the body tag.Remove the body tag and it should work.Also you can use just "frame1.html" and "frame2.html" as src attribute of the frames if you are keeping them in the same folder instead of using their full address.
Here is the Code which worked for me.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>MATERIALS</title>
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8"/>
<link href="projectstyle.css" rel="stylesheet" type="text/css"/>
</head>
<frameset cols="50%,*">
<frame src="frame2.html" />
<frame src="frame1.html" />
</frameset>
</html>