I currently have a peculiar problem with the IE11; it seems like it removes all my script tags in the body tag.
For instance I receive the following HTML from the server:
<html>
<head>
<title></title>
<script type="text/javascript" src="somehost.com/somescript.js"></script>
</head>
<body>
<div>
<!--some content here-->
</div>
<div>
<!--some content here-->
</div>
<script type="text/template" class="someclass">
<div>
<!--some dynamic content here-->
</div>
</script>
</body>
</html>
The rendered result:
<html>
<head>
<title></title>
<script type="text/javascript" src="somehost.com/somescript.js"></script>
</head>
<body>
<div>
<!--some content here-->
</div>
<div>
<!--some content here-->
</div>
</body>
</html>
My use-case is the following:
I have an image with clickable areas. Each area opens a lightbox on click, which has its html provided from script tags in the body since it is dynamic content from the server. I am using jquery to query the corresponding script tag with the proper html. It works properly in Firefox and Chrome, only the IE11 is giving me a headache by removing the script tags.
What am I missing? Why is IE11 removing script tags from the body? Is there a security setting to configure this behavior?
Related
I using Google app script for sending email but I can't set background image before sending email.
I tried jquery and css for set background image but not working
This mail not show background image
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
<?!= include("style");?>
</head>
<style>
*{
}
body {
background-image: url('cid:https://miyagen8.co.jp/wp-content/uploads/2021/11/background.png');
}
</style>
<body>
<div >
<p> <?= client.company ?> </p>
<p> <?= client.department ?> </p>
<p> <?= client.derector ?> </p>
<p> <?= client.name ?>様 </p>
<p>いつもお世話になります。</p>
<p>Text body</p>
</div>
</body>
</html>
Thank you
From the official document, I had thought that background-image might be able to be used. So, for example, in your situation, when background-image is included in the tag of body as the inline style, is that the result you expect?
From:
<body>
To:
<body style="background-image: url('https://miyagen8.co.jp/wp-content/uploads/2021/11/background.png')">
Reference:
CSS Support
Check out this for an example. From what I can tell this is not a valid link: cid:https://miyagen8.co.jp/wp-content/uploads/2021/11/background.png because you are setting two protocolls cid and https. Therefore remove the cid: and it should work with this:
https://miyagen8.co.jp/wp-content/uploads/2021/11/background.png
First, I know this is very simple and I'm as baffled as you are that I can't figure it out on my own. I have no background in web development and need to use github pages to document a project. I've been spinning my wheels on this for an embarrassing amount of time.
The crux of the problem is that I'm trying to use nested iframes, but with each layer I get another scroll bar and nothing scrolls quite in sync. If I set scrolling="no" content is hidden. This is exacerbated when I use a frames for the side bar.
Index.html
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="./styles/main_style_sheet.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="mainheader">
<b> My Project Name
</b>
</div>
<body>
<div class="topnav">
Overview
Model Concepts/Patterns
Data Lineage
Entity Details
Jargon Glossary
Example Demos
</div>
<!-- This creates a frame in the lower body, with an unwanted scroll bar, but it's not too bad. -->
<iframe name="main_body" src="overview.html" height="100%" width="100%">
</body>
</html>
It gets more problematic is trying to do the left sidebar. It looks like I just don't understand how heights are inherited between frames. The image shows how the sidebars keep stacking up, and the scrolling is just not quite in sync. I've tried bumping up the height to 100000 and hiding scrolling, but then horizontal scroll is also eliminated.
<!DOCTYPE html>
<html>
<link href="./styles/main_style_sheet.css" rel="stylesheet" type="text/css">
<body>
<div class="container" style="display: flex; height:100%;">
<div style="display:inline-block;">
<iframe
src="cs_entity_sidebar.html"
name="cs_entity_sidebar"
frameborder="0"
scrolling="no"
width="100%"
align="left">
</iframe>
</div>
<iframe class="second-row"
name="main_overview_content"
scrolling = "yes"
height=10000
align="left"
>
</iframe>
</div>
</html>
This site has a tutorial that is almost what I need, just a simple layout without frames
https://usefulangle.com/post/61/html-page-with-left-sidebar-main-content-with-css
Operative snippet:
<div id="main-container">
<div id="sidebar">
Link 1
Link 2
Link 3
Link 4
Link 5
</div>
<div id="content">Content Area</div>
</div>
But how to I get "Content Area" to populate with the linked html? When I try to do this in my own html is just brings me to a separate window without the top navigation.
This question also gets pretty close, but doesn't cover how to get the links and navigation working.
Furthermore, I have read the jquery/ajax is the better approach here, but none of what I'm doing in ajax has an effect. I'm on a corporate vpn so I'm thinking there is some proxy issue.
Any help is appreciated.
Edit: Jquery/Ajax approach which is not working. It doesn't fail, the click just doesn't do anything. I've tried various sources, including the google library, but src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js" is what I've seen working on other projects in my company.
Note the screenshot, nothing loaded above "Above this is from the script"
<html>
<head>
<!-- load ajax, file can also be loaded locally -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<link href="./styles/main_style_sheet.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script>
/* create event handler that loads content into main area when navigation link is clicked */
$(document).ready(function () {
$('#link1').click(function(){
$('#main_body').load('test.html');
});
});
</script>
</head>
<body>
<div class="mainheader">
<h3>My Project Name</h3>
</div>
<div class="topnav">
<a id="link1">Overview</a>
</div>
<!-- where you want the page to load -->
<div id="main_body"></div>
<div>Above is loaded from script</div>
<div>Below is loaded from a frame</div>
<iframe src="test.html" ></iframe>
</body>
</html>
edit2: Inspect view error
If I'm understanding correctly, you are trying to make a website that lets users navigate to a new page without triggering a page refresh. This is a modern feature of dynamic websites.
For this purpose, it is definitely preferable to use jquery/ajax over iframe because of the many styling issues related to iframes (think about responsive mobile webpages). Here's a simple snippet for implementation using jquery/ajax
index.html:
<html>
<head>
<!-- load ajax, file can also be loaded locally -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
/* create event handler that loads content into main area when navigation link is clicked */
$(document).ready(function () {
$('#link1').click(function(){
$('#main_body').load('overview.html');
});
});
</script>
</head>
<body>
<div class="mainheader">
<h3>My Project Name</h3>
</div>
<div class="topnav">
<a id="link1">Overview</a>
</div>
<!-- where you want the page to load -->
<div id="main_body"></div>
</body>
</html>
overview.html:
<html>
<style>
#wrapper {
background-color: yellow;
height: 200px;
}
</style>
<div id="wrapper">
<p>Dynamically loaded webpage</p>
</div>
</html>
link to a demo
Note that there are some security concerns to consider when you dynamically load content. You can read more about this in this question: Dynamic html page creation with jquery
Edit: Your code works fine on an online text editor. Ajax only works if you host the webpages on a server where the page can be loaded with supported protocol schemes such as http/https.
This is what I'm trying to do with my site:
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_loader5
Unfortunately, that example assumes that I want the entire page to display a CSS loader, but my page is divided into sections, and I only want a portion of the page to display the CSS loader. The original example uses the body tag. But I can't use the body tag twice in my code or it won't pass validation. How can I fix my code so that it validates and the CSS loader still functions the way I want it to?
Please keep in mind that I am only familiar with HTML and CSS. I do not know anything about JavaScript. The little bit of JavaScript I have in my site has been copied and pasted from other sources.
The issue is with:
<body onload="myFunction()" style="margin:0;">
So I'm thinking that if I can change "body" to something else, then I should be good. But I don't know what I should change it to. Or how to connect the new word to the content that I want it to affect.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- head section begins here -->
<!-- head section ends here -->
</head>
<body>
<!-- body section begins here -->
<div class="wrapper">
<div class="section">
<div class="largecontent">
<body onload="myFunction()" style="margin:0;">
<div id="loader"></div>
<div style="display:none;" id="myDiv" class="animate-bottom">
<!-- www.123formbuilder.com script begins here -->
<script type="text/javascript" defer
src="https://www.123formbuilder.com/embed/4923120.js"
data-role="form" data-default-width="650px"></script>
<!-- www.123formbuilder.com script ends here -->
<script>
var myVar;
function myFunction() {myVar = setTimeout(showPage, 3000);}
function showPage()
{document.getElementById("loader").style.display = "none";
document.getElementById("myDiv").style.display = "block";}
</script>
</div>
</div>
</div>
</div>
<!-- body section ends here -->
</body>
</html>
1) Error: Start tag body seen but an element of the same type was already open.
From line 130, column 21; to line 130, column 66
<body onload="myFunction()" style="margin:0;">↩
2) Fatal Error: Cannot recover after last error. Any further errors will be ignored.
From line 130, column 21; to line 130, column 66
<body onload="myFunction()" style="margin:0;">↩
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body onload="myFunction()">
<div class="wrapper">
<div class="section">
<div class="largecontent">
<div style="margin:0;">
<div id="loader"></div>
<div style="display:none;" id="myDiv" class="animate-bottom">
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" defer src="https://www.123formbuilder.com/embed/4923120.js" data-role="form" data-default-width="650px"></script>
<script>
var myVar;
function myFunction() {myVar = setTimeout(showPage, 3000);}
function showPage(){
document.getElementById("loader").style.display = "none";
document.getElementById("myDiv").style.display = "block";
}
</script>
</body>
</html>
I validated my website using: https://validator.w3.org/#validate_by_upload
and I got no errors. However, the website recently changed and now I get these 2 messages:
Info: The Content-Type was application/octet-stream. Using the XML parser (not resolving external entities).
Fatal Error: Empty document, with no root element.
What do these messages mean? How do I correct the error?
The settings I used were: Encoding: utf-8 document type: HTML5
SIMPLE HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="css/omnicode.css" rel="stylesheet" type="text/css">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
</script>
<![endif]-->
</head>
<body>
<div class="container">
<header>
<h1>Header</h1>
</header>
<hr>
<p> TEXT </p>
<hr>
<footer>Footer</footer>
</div>
</body>
</html>
It could be because you have opening tags that are not closed. I put your code in to the checker and it complained about the body element being found before the div is closed:
<body>
<div class="container"> <!-- no closing tag for this div -->
<header>
<h1>Header</h1>
</header>
<hr>
<p> TEXT </p>
<div>
<hr>
<footer>Footer</footer>
</div>
</body>
Message filtering
Info: The Content-Type was text/html. Using the HTML parser.
Info: Using the schema for HTML with SVG 1.1, MathML 3.0, RDFa 1.1, and ITS 2.0 support.
Error: End tag for body seen, but there were unclosed elements.
From line 27, column 1; to line 27, column 7
Error: Unclosed element div.
From line 17, column 1; to line 17, column 23
Fix that and rerun the tests.
This is an issue when using the old w3 validator and Safari as the uploading Browser; If you upload using Chrome it should work fine, or if you cut and paste it should work fine. Also, if you upload using Safari to the "new school" validator it will work as well.
http://html5.validator.nu/
It looks fine but some tags need to be closed like your hr's
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="css/omnicode.css" rel="stylesheet" type="text/css">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
</script>
<![endif]-->
</head>
<body>
<div class="container">
<header>
<h1>Header</h1>
</header>
<hr />
<div>
<p> TEXT </p>
</div>
<hr />
<footer>Footer</footer>
</div>
</body>
</html>
i'v created demo page of mobile jquery using TextEdit...which is,
<!doctype html>
<html>
<head>
<title>My Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css">
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>My Title</h1>
</div><!-- /header -->
<div data-role="content">
<p>Hello world</p>
</div><!-- /content -->
<div data-role="footer">
<h4>My Footer</h4>
</div><!-- /footer -->
</div><!-- /page -->
</body>
</html>
but, in my browser code is not getting compiled and it shows these texts as it is as plain text.. and i'v confirmed that my browser support HTML5 here: http://html5test.com/
what is missing!?
Question is what browser are you using? I tried your code with Chrome and it worked perfectly.
My guess is that you are behind a corporate or university firewall that is blockign your CDN urls. So why don't you download the jQuery mobile files and place the js, css files locally and try to run the page again?
src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
sorry but issue was weird, actually i had created that page using textEdit which stored all text as rich text format which may not recognized to be compiled as html... so i converted that text to plain text and saved it again and that worked!!
thanks all.