How can I embed a webpage within another and isolate CSS - javascript

I need to embed one webpage within another, the inner page will be wrapped by a <div> and not contain the <html>, <head><title> or stuff like that, however, the inner page can contain <link>'s to CSS that I don't want to affect the outer page
I currently fetch the HTML with AJAX and insert it into the outer DOM, to workaround the styles conflicting I extract any links prior to embedding into the DOM, fetch that CSS with AJAX, parse the styles and apply them inline using jQuery selectors.
That has obvious problems with things like pseudo-selectors, however, the main problem is that styles from the outer page affect the inner page, I cant reasonably reset every possible style, and I need to access the inner pages dom so using an iframe is out of the question.
Its a fairly complex setup, but I was wondering if anyone had seen anything along similar lines or had a nicer approach.
Cheers
Dale

You could assign a unique id to the div and prepend the selector to all the rules in the css.
HTML Before
<div>
<!--start ajax content -->
Content
<!--end ajax content -->
</div>
CSS Before
a {color:#999;}
HTML After
<div id="unique0001">
<!--start ajax content -->
Content
<!--end ajax content -->
</div>
CSS After
#unique0001 a {color:#999;}

Related

div innerhtml object access parent html div

I have a main.html containing the following div:
<div id="main">
I want to dynamically load html in this div (say page1.html and page2.html). I am able to accomplish this through the following code :
document.getElementById("main").innerHTML='<object type="text/html" data="page1.html" ></object>';
Now, I want to have a button id="btn1" in my page1.html, which should load page2.html into div "main" of my parent main.html.
However, in page1.html, I am not able to locate my container div "main"
document.getElementById("main") // returns null
Thanks in advance for the help!
Your issue is trying to use a single page's DOM to interact with content loaded in through an iframe or object. Using these makes life very difficult for a JavaScript developer.
If you are using only plain JavaScript, I would suggest you instead use an AJAX request to load in HTML directly through the DOM instead of transcluding this content using old methods.
Here's a beginner's guide to plain-JS AJAX. Frameworks like jQuery simplify the process immensely.
http://code.tutsplus.com/articles/how-to-make-ajax-requests-with-raw-javascript--net-4855
Otherwise, no. You cannot access that node's content because of Cross-Site Scripting security features.

Inserting HTML code without being affected by CSS and Jquery

I want to insert some HTML code inside a page, the code I insert should not be affected by the CSS and JS of that page, it should load it's own CSS and JS.
Example Code:
<div class="body">
<p>Example Content </p>
<p>Sample Content 2 </p>
<div class="special-div">
<p> No CSS and JS to be applied to this div 'special-div', it should load it's own CSS and JS </p>
</div><!-- /.special-div -->
</div><!-- /.body -->
In the above code div with class "special-div" should load it's own CSS and JS and should not be affected by page's CSS and JS
I've tried using iframes but firstly they are cross origin, secondly iframe has it's own scroll bar.
I am trying to insert a slider into wordpress page, I've built slider in a HTML site and tested it but the default wordpress styles and JS are changing the layout. I can easily remove the styles but I'm not sure how to get rid of the JS which is affecting the slider
Any help would be appreciate.
One way of doing it is Shadow DOM.
Shadow DOM provides encapsulation for the JavaScript, CSS and templating in a Web Component. Shadow DOM makes it so these things remain separate from the DOM of the main document. You can also use Shadow DOM by itself, outside of a web component.

DOM processing and javascript placement

just a quick question concerning order of processing and the way DOM's are processed.
My understanding is that it is best practice to include all JQuery scripts just before the tag. In my situation, I have a div container that witholds most of my body elements. Among these elements are my footer, which has the company name and year. Currently my pages are setup in a modular fashion (header.php, page.php, footer.php) and I want to include my company name and year in the footer.php, as this would obviously allow for easy editing of the company name. My problem lies in wanting to maintain the format of keeping jquery scripts just before the body. With this layout, I cannot include the company name in my footer.php without including the jquery scripts within my div. I'll show you what I mean with psuedocode:
How it's currently setup:
page.php
<body>
<div class="container">
//body elements
<hr>
<p>© Company 2012</p>
</div>
<script>
//some javascript #1
</script>
<script>
//some javascript #2
</script>
footer.php:
<script> //same static javascript that doesn't change page to page </script>
</body>
How I want to set it up (allows for easy site-wide changing of company name):
page.php
<body>
<div class="container">
//body elements
<script>
//some javascript #1
</script>
<script>
//some javascript #2
</script>
footer.php:
<hr>
<p>© Company 2012</p>
</div>
<script> //same static javascript that doesn't change page to page </script>
</body>
I realize I can do it this way, but I am afraid of losing optimization since my jquery scripts will technically be executing within the container.
With all of this said, will including my jquery scripts before the closing div of the page's container, but after all the contents of the div, cause it to be less efficient than if it was after said div closing?
I realize all of this entirely depends on how a DOM is processed, but I can't seem to find any information on whether or not the DOM processes as it goes, or if it requires an ending tag before it's actually processed, which would in turn cause the second method to be slower.
Let me know if I can clear anything up.
Thanks
Inline scripts block the rendering of the whole page. (Only Opera does some rendering) So it doesn't matter where you put them in your case. In general it's better to put them at the end because external files can still be downloaded, and if flushing is enabled something can be rendered.
External scripts only block the rendering of everything below them.

Use CSS/Javascript received through AJAX

I'm experimenting with the jQuery UI tab control, and have three tabs that each load a different page through AJAX. The pages that are loaded are complete html-pages, with their own Javascript and CSS.
Scripts that are inline in the html body are ok, so are CSS in the style-attribute on tags, but Javascript and CSS in the head of the loaded pages are not used at all.
How can I make use of the Javascript and CSS in the head of the loaded pages? Or do I have to include all CSS and Javascript in the page containing the tab control?
The AJAX load is going to filter out anything that's not in the body element. You can put the CSS/Javascript tags in the body and they will be added to your page, but I would avoid that if at all possible. If you're not careful, you'll end up including things multiple times.
I suggest putting the common stuff like jQuery itself, plugins, etc. on the page containing the tabs and only put tab-specific scripts on the bits that are loaded via AJAX. You'll need to be careful to manage ids -- they have to be globally unique, not unique within the tab. Sticking with classes may be a better way to handle this or preface your ids with the tab name. For CSS I would try to make it so the CSS applies to the entire page, including tabs, and load it with the page.
YMMV.
You could add this line in your head:
<link rel="stylesheet" id="yourid" type="text/css" />
and this after your ajax call:
document.getElementById('yourid').href='css/'+yourvariable+'.css';}
And you can do the same for scripts (change rel and type).

How do I prevent CSS interference in an injected piece of HTML?

I'm currently developing a Safari extension that uses an injected script to further inject some HTML into the current webpage, as well as injecting some other scripts to make it work. This is all working fine, but the issue is that the HTML that is injected gets affected by CSS stylesheets that the webpage has already imported. For example, the HTML looks perfect on Google.com (which has relatively little CSS styling), but awful on StackOverflow.com (which styles buttons etc).
jQuery is injected into the webpage at the time of this HTML being displayed, so I have that available. I've tried all kinds of things, including walking through all of the elements and calling removeClass() on each of them, to no avail. I've also tried to add "CSS reset" classes, etc, but nothing seems to be working.
What's the best way to go around preventing the CSS from interfering with my HTML?
You can't prevent that from happen. However, you can override the CSS rules. Give your main element a unique id (which really should be unique by obfustation, like "yourapplicationname_mainelement_name" or something), then override all possible styles that might give strange effects on your html.
Your plugin:
<div id="yourapplicationname_mainelement_name">
<p>My paragraph that must not be styled</p>
</div>
Your css:
#yourapplicationname_mainelement_name p {
display: block;
color: black;
background: white;
position: relative;
... and so on ...
}
As your css style rules are the most specific, given your id, they will override any settings present on the page where your html is injected.
Further... It might be hard to see what rules are the most important. You can use firebug or similar to understand which is overriding another. You'll have a hard time without it when developing your application.
that's a tough one. two options as I see it.
You could set a wrapping div around all your content and prefix all your css with that. example:
<body>
<div class='wrappingDiv'>
...
</div>
</body>
stylesheet:
.wrappingDiv * {}
Then when you inject jquery use that to close off the initial wrapping div before your content and to wrap any following content in the another wrapping div.
Issues:
Only possible if you are injecting
other site content onto your own
site.
This could get complicated
depending on where you are injecting
html.
The other option is to load a resetting stylesheet that targets your injected html specifically. In this case only your injected html would be wrapped but you'd need a css file that reset all attributes for all tags to their default before you add your own styles. No real issues here, just not very elegant...
Another way would be to use an element that doesn't inherit stylesheet like an iframe, but that comes with its own issues...
i have seen on different plugins that they put the code inside a iframe and they use JS to interact with the rest of the page, so you can not change the css inside.
Also i have seen that when injecting html code,people sets the style of the plugin content using the "style" attribute inside the tags so the browser will give priority to the css inside the style attribute and not the css file. The idea is to override the css,usually with the "!important" clause. But you might have some problems on different browsers
EDIT i forgot to say that my answer is on the case that you inject the code on someone's else page where you cannot control directly the css

Categories