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.
Related
I have jQuery on my main page and would like to clone/copy the main page version of it inside my iframe, so that I can extend that version with specific plugins that are not relevant on the main page.
How can accomplish do this?
No. That's is not cloning process. You require to put the code for your iframe elements separately or in combined logics.
You cannot clone the function for another scope.
Just insert a <script> tag for jquery in the head of the iframe's document. That will provoke the iframe into loading jQuery.
Don't forget that you have to use the jQuery constructor that takes a 2nd parameter specifying the htmlDocument when you create an element in a different document and when you do element queries in a different document.
Here is an example jsfiddle that puts the main document jquery into an iframe.
CORS applies here, if the iframe is not in the same document, it will not let you "reach into" the iframe. If you control the page, you can use postMessage to get around the security barrier.
So I am currently working on an application that runs on top of the customers page inside its own iframe.
Application works in backbone and everything else except the initialization of the iframe is done inside the iframe. Initialization happens with a small javascript snippet that the client will copy to their footer.
The problem I'm currently having is that I have to inject a CSS file to the parent site in order to style my iframe correctly when it's rendered and I really don't think that I should tamper with clients page at all since CSS might have some conflicts in it.
Is there any better way to style the iframe than the current way of doing it?
I think you have two different options;
Inline iframe styles
Give your client a pre-styled iframe to embed, like this
<iframe src="yoururl.com/client"
frameborder="0"
style="border: 0; width: 100%; height: 600px;">
</iframe>
Embed through script tag
Create a small script tag (that you host) that you give to your client. Inside the script you dynamically create the iframe dom element and possibly other external css-files that you need
Host a JS file, like //yoururl.com/iframe.js
var iframe = document.createElement("iframe");
iframe.setAttribute("src","http://yoururl.com/client");
document.write("<div id='mycontainer'></div>");
document.getElementById("mycontainer").appendChild(iframe);
Then you can give this to your client to put in their page where they want the iframe to show up.
<script src="//yoururl.com/iframe.js" type="text/javascript"></script>
You can provide your css separately to the client. If that is not an option, then you need to do it the way you are doing now (injecting the parent style from within the iframe). However, this does not seem to be a good idea, unless your css rules are pretty unique.
There are many ways but it could be possible that no one is applicable:
Ask the client to style your iframe (inline or with css)
publish the iframed content on the same domain of the main website and check if the parent frame is accessible via javascript
Ask the Client to enable the header "X-Frame-Options". Maybe with something like "ALLOW-FROM SAMEDOMAIN, www.youriframedomain.com". It seems it is deprecated, check for Content-Security-Policy instead.
embed it via script tag
Check for window.postMessage: it requires anyway an additional script in the main website that listens for the message (it could be the css text itself) from the iframe and applies the new style
You should be able to use window.frameElement to refer to the iframe element which your page is embedded in. With that reference, you should be able to modify the style attribute to change how the frame renders.
I am generating some tabular content using ng-repeat in AngularJS, and I would like to have this content display in an iframe, so that the user can drag it and resize it.
I can't use the iframe src attribute, because that requires a URL and I am generating the content on the client.
I probably want some variant of srcdoc, but that seems to want a single quoted line of html code.
How can I construct my iframe such that the ng-repeat generated content is displayed within?
You can add an AngularJS table to an iframe. The support is limited to HTML5 but it looks something like this:
HTML
<iframe id="frame" sandbox="allow-same-origin allow-scripts" srcdoc="" seamless="true"></iframe>
Javascript
document.getElementById("frame").contentWindow.document.getElementById("mydiv")
The srcdoc property can be used instead of src to indicate you will be providing code for the contents. Seamless is also expected when you use srcdoc; it tells the browser that the iframe's contents are supposed to be treated as a part of the website, rather than a nested one. Unfortunately, this will trigger styling changes that eliminate the whole reason you wanted the iframe in the first place (the resize handles disappear). Furthermore, you'd have to inject css files and javascript files into the iframe - it's not worth it.
I'd recommend using something like jQuery UI resizable: https://jqueryui.com/resizable/
Here's a fiddle I was using to test out controlling iframe contents. It's very basic but accurately demonstrates how much trouble they actually are: Fiddle
I am trying to use javascript to open an existing html document and write to specific div.
I have tried a few things:
newwindow=window.open();
newdocument=newwindow.document;
newdocument.write
Which opens a new window/document and writes to it but i need it to open a specific file and write to a specific div. Is this possible. I am also playing around with:
document.getElementById("name").innerHTML= content
I just can't seem to get this - javascript is new to me and I am not sure if i am trying for something that is impossible.
Thanks in advance.
You can use an iframe and make the source the html you wish to import. Or you can use javascript to insert an object tag with the html as source:
<div id="name">
<iframe src="myPage.html"></iframe>
</div>
document.getElementById("name").innerHTML='<object type="text/html" data="myPage.html" ></object>';
I was doing an innerHTML on a div element. MY lead comes and tells me that innerHTML and iFrame are both the same. Now this one was something new. I always thought InnerHTML to be different from iFrame.
[My lead]: "The issue is because he is trying to use innerHTML which
in turn is called as IFRAME for a browser"
I wanted to know the differences between an iFrame and innerHTML. Are they both essentially similar in nature? I looked but couldn't find much.
Thanks
Sounds like a communication error--e.g., if your lead means that the innerHTML of that div is just going to show an iframe as its innerHTML (or otherwise, it would sound like you need a new lead). innerHTML grabs the HTML code as a string inside of the selected element. An iframe is an element used for transcluding content (usually from other sites or other pages on your own site). Apples and oranges...
They're very different. An iframe tells the browser to load a different URL in the iframe, and it will often have it's own scrolls. But a div can be made to look and work like an iframe by setting
overflow: auto
- in the style. Maybe that's what he meant.
iframe is an HTML tag used for displaying another website or page on your page, innerHTML is used in Javascript to change the content of an element on your webpage.
They are completely different.
They are not the same. Innerhtml is a way to access the contained html of an html element. An iframe is an element that let's you display content from a different web page than the one you're currently on.