How to load HTML file with style without affecting the rest of the page styles?2019 Community Moderator ElectionHow can I upload files asynchronously?Styling an input type=“file” buttonHow do I modify the URL without reloading the page?How do I include a JavaScript file in another JavaScript file?How to style a <select> dropdown with only CSS?How to create an HTML button that acts like a link?How to style a checkbox using CSS?How can I refresh a page with jQuery?Redirect from an HTML pageLoad a html page to a div without affecting the style outside the div
Is there a term for accumulated dirt on the outside of your hands and feet?
Hausdorff dimension of the boundary of fibres of Lipschitz maps
Is honey really a supersaturated solution? Does heating to un-crystalize redissolve it or melt it?
If "dar" means "to give", what does "daros" mean?
Suggestions on how to spend Shaabath (constructively) alone
Can a medieval gyroplane be built?
Recruiter wants very extensive technical details about all of my previous work
How do hiring committees for research positions view getting "scooped"?
Can other pieces capture a threatening piece and prevent a checkmate?
Is it insecure to send a password in a `curl` command?
Probably overheated black color SMD pads
Brake pads destroying wheels
What are substitutions for coconut in curry?
How to get the n-th line after a grepped one?
Does multi-classing into Fighter give you heavy armor proficiency?
Print last inputted byte
I seem to dance, I am not a dancer. Who am I?
Differential and Linear trail propagation in Noekeon
How to terminate ping <dest> &
Calculate the frequency of characters in a string
The average age of first marriage in Russia
My friend is being a hypocrite
Should I be concerned about student access to a test bank?
Practical application of matrices and determinants
How to load HTML file with style without affecting the rest of the page styles?
2019 Community Moderator ElectionHow can I upload files asynchronously?Styling an input type=“file” buttonHow do I modify the URL without reloading the page?How do I include a JavaScript file in another JavaScript file?How to style a <select> dropdown with only CSS?How to create an HTML button that acts like a link?How to style a checkbox using CSS?How can I refresh a page with jQuery?Redirect from an HTML pageLoad a html page to a div without affecting the style outside the div
I am creating a basic email client for myself in electron. When I load an email, that email data needs to be displayed inside a div element that looks like this <div id="emailDisplay"></div>. The only problem is that this html can contain embedded stylesheets which then affect the rest of the page. I tried using an iframe but when one of the elements failed to load (such as an image), it caused an exception and my other needed JavaScript is never executed. The exact error is net::ERR_CONNECTION_TIMED_OUT. So what I'm asking is how can I display this HTML without it affecting the rest of the document's styles or how can I catch and ignore the iframe error? Thanks in advance.
javascript html css node.js electron
asked Mar 6 at 22:04
JonahJonah
1113
add a comment |
I am creating a basic email client for myself in electron. When I load an email, that email data needs to be displayed inside a div element that looks like this <div id="emailDisplay"></div>. The only problem is that this html can contain embedded stylesheets which then affect the rest of the page. I tried using an iframe but when one of the elements failed to load (such as an image), it caused an exception and my other needed JavaScript is never executed. The exact error is net::ERR_CONNECTION_TIMED_OUT. So what I'm asking is how can I display this HTML without it affecting the rest of the document's styles or how can I catch and ignore the iframe error? Thanks in advance.
javascript html css node.js electron
asked Mar 6 at 22:04
JonahJonah
1113
iframeis the way to go. The error is going to happen no matter what you use, since that's a network error and has nothing to do with code. You could tryembedorobjectbut those have the same issues asiframeand are harder to use.
– Heretic Monkey
Mar 6 at 22:27
add a comment |
I am creating a basic email client for myself in electron. When I load an email, that email data needs to be displayed inside a div element that looks like this <div id="emailDisplay"></div>. The only problem is that this html can contain embedded stylesheets which then affect the rest of the page. I tried using an iframe but when one of the elements failed to load (such as an image), it caused an exception and my other needed JavaScript is never executed. The exact error is net::ERR_CONNECTION_TIMED_OUT. So what I'm asking is how can I display this HTML without it affecting the rest of the document's styles or how can I catch and ignore the iframe error? Thanks in advance.
javascript html css node.js electron
asked Mar 6 at 22:04
JonahJonah
1113
I am creating a basic email client for myself in electron. When I load an email, that email data needs to be displayed inside a div element that looks like this <div id="emailDisplay"></div>. The only problem is that this html can contain embedded stylesheets which then affect the rest of the page. I tried using an iframe but when one of the elements failed to load (such as an image), it caused an exception and my other needed JavaScript is never executed. The exact error is net::ERR_CONNECTION_TIMED_OUT. So what I'm asking is how can I display this HTML without it affecting the rest of the document's styles or how can I catch and ignore the iframe error? Thanks in advance.
javascript html css node.js electron
javascript html css node.js electron
asked Mar 6 at 22:04
JonahJonah
1113
asked Mar 6 at 22:04
JonahJonah
1113
asked Mar 6 at 22:04
JonahJonah
1113
asked Mar 6 at 22:04
JonahJonah
1113
asked Mar 6 at 22:04
JonahJonah
1113
1113
iframeis the way to go. The error is going to happen no matter what you use, since that's a network error and has nothing to do with code. You could tryembedorobjectbut those have the same issues asiframeand are harder to use.
– Heretic Monkey
Mar 6 at 22:27
add a comment |
iframeis the way to go. The error is going to happen no matter what you use, since that's a network error and has nothing to do with code. You could tryembedorobjectbut those have the same issues asiframeand are harder to use.
– Heretic Monkey
Mar 6 at 22:27
iframe is the way to go. The error is going to happen no matter what you use, since that's a network error and has nothing to do with code. You could try embed or object but those have the same issues as iframe and are harder to use.– Heretic Monkey
Mar 6 at 22:27
iframe is the way to go. The error is going to happen no matter what you use, since that's a network error and has nothing to do with code. You could try embed or object but those have the same issues as iframe and are harder to use.– Heretic Monkey
Mar 6 at 22:27
add a comment |
2 Answers
2
active
oldest
votes
Well, what about using a tag within your HTML?
It would still being HTML and if you specify it to style just one tag it will work.
<div id="emailDisplay"></div>
<style>
#emailDisplay
background-color: red;
</style>
Another way of resolving this problem is by creating encapsulated javascript components (maybe with Vue or React)
answered Mar 6 at 22:12
Michel CalheirosMichel Calheiros
754
The problem with this, is there is no way to pull the style tag from the document. I could use RegEx but the problem is I can't be 100% that it will get the style for every email.
– Jonah
Mar 6 at 22:16
add a comment |
Only ancient email clients support running JavaScript, to do so opens so many security vulnerabilities, not advised. Iframe creates another browser context. Each browser context is a complete document environment, is not possible for the iframe CSS to affect the parent CSS.
answered Mar 6 at 22:20
Joshua RobinsonJoshua Robinson
1,7861824
Yes, I understand this but my JavaScript isn't loaded when the get request for my image isn't loaded.
– Jonah
Mar 6 at 22:22
Saying you need your code to run before your image is loaded? Move the code above the image, load JavaScript in the head of the document
– Joshua Robinson
Mar 6 at 22:24
The JavaScript is in the head.
– Jonah
Mar 6 at 22:31
Can simplified relevant code be added to the question? More than happy to help, confused about the part where an image failing to load throws a JavaScript error, unless there is an onLoad handler attached that’s has some buggy code
– Joshua Robinson
Mar 6 at 22:34
So I figured it out but I can't leave you hanging right because you'll go mad trying to understand. Basically, I had added awindow.onloadevent at one point in my code and all my JavaScript was inside of this. So, while the image was waiting for the GET response, the JavaScript basically was unusable. So, I moved my JavaScript out of this window.onload and now it works perfectly because of this. Thank for being willing to help and if you wish to discuss this further, you can add me on discord Jonah#5945.
– Jonah
Mar 6 at 23:36
|
show 1 more comment
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55032891%2fhow-to-load-html-file-with-style-without-affecting-the-rest-of-the-page-styles%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
Well, what about using a tag within your HTML?
It would still being HTML and if you specify it to style just one tag it will work.
<div id="emailDisplay"></div>
<style>
#emailDisplay
background-color: red;
</style>
Another way of resolving this problem is by creating encapsulated javascript components (maybe with Vue or React)
answered Mar 6 at 22:12
Michel CalheirosMichel Calheiros
754
The problem with this, is there is no way to pull the style tag from the document. I could use RegEx but the problem is I can't be 100% that it will get the style for every email.
– Jonah
Mar 6 at 22:16
add a comment |
Well, what about using a tag within your HTML?
It would still being HTML and if you specify it to style just one tag it will work.
<div id="emailDisplay"></div>
<style>
#emailDisplay
background-color: red;
</style>
Another way of resolving this problem is by creating encapsulated javascript components (maybe with Vue or React)
answered Mar 6 at 22:12
Michel CalheirosMichel Calheiros
754
The problem with this, is there is no way to pull the style tag from the document. I could use RegEx but the problem is I can't be 100% that it will get the style for every email.
– Jonah
Mar 6 at 22:16
add a comment |
Well, what about using a tag within your HTML?
It would still being HTML and if you specify it to style just one tag it will work.
<div id="emailDisplay"></div>
<style>
#emailDisplay
background-color: red;
</style>
Another way of resolving this problem is by creating encapsulated javascript components (maybe with Vue or React)
answered Mar 6 at 22:12
Michel CalheirosMichel Calheiros
754
Well, what about using a tag within your HTML?
It would still being HTML and if you specify it to style just one tag it will work.
<div id="emailDisplay"></div>
<style>
#emailDisplay
background-color: red;
</style>
Another way of resolving this problem is by creating encapsulated javascript components (maybe with Vue or React)
answered Mar 6 at 22:12
Michel CalheirosMichel Calheiros
754
answered Mar 6 at 22:12
Michel CalheirosMichel Calheiros
754
answered Mar 6 at 22:12
Michel CalheirosMichel Calheiros
754
answered Mar 6 at 22:12
Michel CalheirosMichel Calheiros
754
754
The problem with this, is there is no way to pull the style tag from the document. I could use RegEx but the problem is I can't be 100% that it will get the style for every email.
– Jonah
Mar 6 at 22:16
add a comment |
The problem with this, is there is no way to pull the style tag from the document. I could use RegEx but the problem is I can't be 100% that it will get the style for every email.
– Jonah
Mar 6 at 22:16
The problem with this, is there is no way to pull the style tag from the document. I could use RegEx but the problem is I can't be 100% that it will get the style for every email.
– Jonah
Mar 6 at 22:16
The problem with this, is there is no way to pull the style tag from the document. I could use RegEx but the problem is I can't be 100% that it will get the style for every email.
– Jonah
Mar 6 at 22:16
add a comment |
Only ancient email clients support running JavaScript, to do so opens so many security vulnerabilities, not advised. Iframe creates another browser context. Each browser context is a complete document environment, is not possible for the iframe CSS to affect the parent CSS.
answered Mar 6 at 22:20
Joshua RobinsonJoshua Robinson
1,7861824
Yes, I understand this but my JavaScript isn't loaded when the get request for my image isn't loaded.
– Jonah
Mar 6 at 22:22
Saying you need your code to run before your image is loaded? Move the code above the image, load JavaScript in the head of the document
– Joshua Robinson
Mar 6 at 22:24
The JavaScript is in the head.
– Jonah
Mar 6 at 22:31
Can simplified relevant code be added to the question? More than happy to help, confused about the part where an image failing to load throws a JavaScript error, unless there is an onLoad handler attached that’s has some buggy code
– Joshua Robinson
Mar 6 at 22:34
So I figured it out but I can't leave you hanging right because you'll go mad trying to understand. Basically, I had added awindow.onloadevent at one point in my code and all my JavaScript was inside of this. So, while the image was waiting for the GET response, the JavaScript basically was unusable. So, I moved my JavaScript out of this window.onload and now it works perfectly because of this. Thank for being willing to help and if you wish to discuss this further, you can add me on discord Jonah#5945.
– Jonah
Mar 6 at 23:36
|
show 1 more comment
Only ancient email clients support running JavaScript, to do so opens so many security vulnerabilities, not advised. Iframe creates another browser context. Each browser context is a complete document environment, is not possible for the iframe CSS to affect the parent CSS.
answered Mar 6 at 22:20
Joshua RobinsonJoshua Robinson
1,7861824
Yes, I understand this but my JavaScript isn't loaded when the get request for my image isn't loaded.
– Jonah
Mar 6 at 22:22
Saying you need your code to run before your image is loaded? Move the code above the image, load JavaScript in the head of the document
– Joshua Robinson
Mar 6 at 22:24
The JavaScript is in the head.
– Jonah
Mar 6 at 22:31
Can simplified relevant code be added to the question? More than happy to help, confused about the part where an image failing to load throws a JavaScript error, unless there is an onLoad handler attached that’s has some buggy code
– Joshua Robinson
Mar 6 at 22:34
So I figured it out but I can't leave you hanging right because you'll go mad trying to understand. Basically, I had added awindow.onloadevent at one point in my code and all my JavaScript was inside of this. So, while the image was waiting for the GET response, the JavaScript basically was unusable. So, I moved my JavaScript out of this window.onload and now it works perfectly because of this. Thank for being willing to help and if you wish to discuss this further, you can add me on discord Jonah#5945.
– Jonah
Mar 6 at 23:36
|
show 1 more comment
Only ancient email clients support running JavaScript, to do so opens so many security vulnerabilities, not advised. Iframe creates another browser context. Each browser context is a complete document environment, is not possible for the iframe CSS to affect the parent CSS.
answered Mar 6 at 22:20
Joshua RobinsonJoshua Robinson
1,7861824
Only ancient email clients support running JavaScript, to do so opens so many security vulnerabilities, not advised. Iframe creates another browser context. Each browser context is a complete document environment, is not possible for the iframe CSS to affect the parent CSS.
answered Mar 6 at 22:20
Joshua RobinsonJoshua Robinson
1,7861824
answered Mar 6 at 22:20
Joshua RobinsonJoshua Robinson
1,7861824
answered Mar 6 at 22:20
Joshua RobinsonJoshua Robinson
1,7861824
answered Mar 6 at 22:20
Joshua RobinsonJoshua Robinson
1,7861824
1,7861824
Yes, I understand this but my JavaScript isn't loaded when the get request for my image isn't loaded.
– Jonah
Mar 6 at 22:22
Saying you need your code to run before your image is loaded? Move the code above the image, load JavaScript in the head of the document
– Joshua Robinson
Mar 6 at 22:24
The JavaScript is in the head.
– Jonah
Mar 6 at 22:31
Can simplified relevant code be added to the question? More than happy to help, confused about the part where an image failing to load throws a JavaScript error, unless there is an onLoad handler attached that’s has some buggy code
– Joshua Robinson
Mar 6 at 22:34
So I figured it out but I can't leave you hanging right because you'll go mad trying to understand. Basically, I had added awindow.onloadevent at one point in my code and all my JavaScript was inside of this. So, while the image was waiting for the GET response, the JavaScript basically was unusable. So, I moved my JavaScript out of this window.onload and now it works perfectly because of this. Thank for being willing to help and if you wish to discuss this further, you can add me on discord Jonah#5945.
– Jonah
Mar 6 at 23:36
|
show 1 more comment
Yes, I understand this but my JavaScript isn't loaded when the get request for my image isn't loaded.
– Jonah
Mar 6 at 22:22
Saying you need your code to run before your image is loaded? Move the code above the image, load JavaScript in the head of the document
– Joshua Robinson
Mar 6 at 22:24
The JavaScript is in the head.
– Jonah
Mar 6 at 22:31
Can simplified relevant code be added to the question? More than happy to help, confused about the part where an image failing to load throws a JavaScript error, unless there is an onLoad handler attached that’s has some buggy code
– Joshua Robinson
Mar 6 at 22:34
So I figured it out but I can't leave you hanging right because you'll go mad trying to understand. Basically, I had added awindow.onloadevent at one point in my code and all my JavaScript was inside of this. So, while the image was waiting for the GET response, the JavaScript basically was unusable. So, I moved my JavaScript out of this window.onload and now it works perfectly because of this. Thank for being willing to help and if you wish to discuss this further, you can add me on discord Jonah#5945.
– Jonah
Mar 6 at 23:36
Yes, I understand this but my JavaScript isn't loaded when the get request for my image isn't loaded.
– Jonah
Mar 6 at 22:22
Yes, I understand this but my JavaScript isn't loaded when the get request for my image isn't loaded.
– Jonah
Mar 6 at 22:22
Saying you need your code to run before your image is loaded? Move the code above the image, load JavaScript in the head of the document
– Joshua Robinson
Mar 6 at 22:24
Saying you need your code to run before your image is loaded? Move the code above the image, load JavaScript in the head of the document
– Joshua Robinson
Mar 6 at 22:24
The JavaScript is in the head.
– Jonah
Mar 6 at 22:31
The JavaScript is in the head.
– Jonah
Mar 6 at 22:31
Can simplified relevant code be added to the question? More than happy to help, confused about the part where an image failing to load throws a JavaScript error, unless there is an onLoad handler attached that’s has some buggy code
– Joshua Robinson
Mar 6 at 22:34
Can simplified relevant code be added to the question? More than happy to help, confused about the part where an image failing to load throws a JavaScript error, unless there is an onLoad handler attached that’s has some buggy code
– Joshua Robinson
Mar 6 at 22:34
So I figured it out but I can't leave you hanging right because you'll go mad trying to understand. Basically, I had added a
window.onload event at one point in my code and all my JavaScript was inside of this. So, while the image was waiting for the GET response, the JavaScript basically was unusable. So, I moved my JavaScript out of this window.onload and now it works perfectly because of this. Thank for being willing to help and if you wish to discuss this further, you can add me on discord Jonah#5945.– Jonah
Mar 6 at 23:36
So I figured it out but I can't leave you hanging right because you'll go mad trying to understand. Basically, I had added a
window.onload event at one point in my code and all my JavaScript was inside of this. So, while the image was waiting for the GET response, the JavaScript basically was unusable. So, I moved my JavaScript out of this window.onload and now it works perfectly because of this. Thank for being willing to help and if you wish to discuss this further, you can add me on discord Jonah#5945.– Jonah
Mar 6 at 23:36
|
show 1 more comment
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55032891%2fhow-to-load-html-file-with-style-without-affecting-the-rest-of-the-page-styles%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
iframeis the way to go. The error is going to happen no matter what you use, since that's a network error and has nothing to do with code. You could tryembedorobjectbut those have the same issues asiframeand are harder to use.– Heretic Monkey
Mar 6 at 22:27