I want to load a java script file in a html file using object tag or any other way .
my scenario is as follows .
parent.html file contain two div inside which I am loading childOne.html and childTwo.html
files using object tag.
My problem is i have to do some work using jQuery.js , which i have to include in both the
children html files.
What I want is some WAY by which i just include the jQuery.js in the parent.html and
the two children html file should take the JS file from parent.html .
Please suggest some way .
<object> elements are, in this context, second-class <iframe>s. Different documents are different documents and have their own JavaScript environments.
You can communicate between them through parent and frames (depending on in which direction you are going in… and some browsers might not uses the frames API for <object>).
In theory, you might be able to wait for the framed documents to load, then access document.frames.frameid.contentDocument and copy the jQuery object into it - but that would probably result in a big mess as you try to get it refer to the right document object.
Your best bets are to either:
Stop trying to treat your framed documents as part of the document framing them - they are independent. If they need to use jQuery then it is their responsibility to load it. or
Stop using frames and put the HTML content of those files in the top level document so they aren't independent
You can just add the script tag with the jQuery file url into the parent.html file and it will work when children is loaded
if you do add jquery code to the child file make sure you instantiate jQuery in the file eg
<script type="text/javascript">
$(function(){});
</script>
if you do that the jQuery code will work
Related
I want to create and manipulate several HTML files with JavaScript and NodeJS. The usual way to update HTML files is to include an update script at the top, but I want to create multiple HTML files with one JS file. I have a list with the necessary data to process. It contains the names for the HTML files and the data to put in.
My idea was to use a model.html file, which contains the data, that will be included in all of the files. This model file will be copied and renamed to the necessary file. Then I want to load it with a NodeJS module or any other way fit, so it will be recognized as "document" as if the script was included in the file. Then I want to manipulate it with plain JS. A for loop should iterate through the list and create the file, load it as "document", manipulate it and then go to the next file.
Is this possible?
If you want to just parse the HTML and get the document and operate on it you can check https://cheerio.js.org/
If you want to execute the Javascript also then you need to use Headless browsers like Headless Chrome
I linked all the javascript files in the header.php at atime. I included header.php in all pages
When I link the javascript files like this
<script src='js/home.js'></script>
<script src='js/disc.js'></script>
<script src='js/que.js'></script>
only last file js/que.js is working.
Make sure that the 'src' is referring to the correct file directory where the script is located. If you are using an IDE such as VS, then you may drag the file into the code and the IDE will automatically create the reference for you.
Unless you have problem with directory structure or you file name does not match with src attribute of script tag, there should not be any problem with. Please try to use type="text/javascript" and make sure your script tags are after header tag or just before </body> tag. Also keep sequence of files loading if any file depends on another file variable or any function. If it still does not work use try to see if there is any error in your code in console window.
I now I'm going to get voted down for this but oh well. I don't have enough points to comment which is what I would do but..oh well.
Okay it depends on what the scripts are doing. If you link the scripts in the head for you HTML page, and try a var element = document.getElementById("theID"); this will return null due to the fact that the browser has yet to read the HTML and hasn't had a chance to create a DOM (Document Object Model) tree. For a problem like this check out
<script>
function load() {
console.log("load event detected!");
}
window.onload = load;
</script>
This will assign window to an event/callback that will be invoked after the page has had time to load.
Look at where your JavaScript is used, and what it should be doing. Would those elements be rendered yet. Are you writing functions but not actually calling them (this happens A LOT)? It would be better if you described what the code was doing and your experience with HTML and JavaScript. Remember that the browser interprets the JavaScript as it encounters it, you can put script tags anywhere in your HTML file, not just in the head. Also are the .js files in the same directory as the HTML file or are the two non working .js files in the same directory as "js/que.js"? If not move them to the same file or use a relative or absolute path.
I have two HTML files that are generated from a particular application; one is a navigation "header" file and the other is a "content" file that the navigation file points to.
I have access to these files but I don't have control over how they're generated.
The files currently fit together by a third file "index.html". The index file uses document.write() to create a frameset tag and then two frame tags, one for each HTML file noted above.
I'm writing a replacement index.html file that mimic's the frameset with section tags and then adds in some features that allows the user to perform processes on the "content" html file.
So far I'm able to accomplish this by using the jquery load() method to grab the navigation and content files, but when I take the files offline (these files are meant to be consumable directly from the desktop) it does not work. I read into the jquery documentation for load() and see that it needs to be run from a server.
My questions is: is there any way to load the content from one html file into another html file without being in a hosted environment? I've seen it work in other solutions like the bwip-js and it looks like it's just using the jquery load(), but there must be something I'm missing.
Any suggestions?
I'm trying to interface with Adobe Test & Target because I want to load JSON rather than markup through my mbox. I want to load some mbox content into javascript and manually add it to the DOM. I have searched all over for full documentation of the mbox.js but I can't find anything other than the very basics. It describes how to use mboxDefine() and mboxUpdate to target a specific dom element. Is there a function that just returns the content?
```
T&T does not offer a function to assign the response to a javascript variable. Basically the way it works is mbox.js builds a url to their server and then then outputs a script include tag. This is done to get around the same origin policy limitations (cross-site scripting).
In order to handle whatever is in the html offer, they put it in their own javascript variable on their server and then output it as that as the response. However, they also have the response output the code that updates the target element. So there's nothing you can do to actually stop them from updating the target element with the html offer contents. They simply don't expose that.
However, you don't have to put html in an html offer. You can put json (javascript) in an html offer. Just do like
html offer 'myJsonMbox' (in interface)
<script type='text/javascript'>
var myJsonString = "[json string]";
</script>
Then on your page (inside your body tag, but before your code that wants to use it) you'd have the regular mbox code:
<div class='mboxDefault'></div>
<script type='test/javascript'>
mboxCreate('myJsonMbox');
</script>
And then somewhere after that, where you're wanting to do something with it, that myJsonString is there for you to reference. Or, you can do it with the mboxDefine and mboxUpdate sometime after page load, if you prefer.
Is there some particular reason why you don't think this will work for you?
You can:
a- Insert JS code you are going to use to manually manipulate the DOM
b- Insert CSS code you can use to alter the original HTMl or the newly added HTML.
c- Insert a call to a 3rd party script that will load content from a 3rd party server if needed, or the same server.
I have a project I'm working on called Natalie.
What it does, (twitter.com is a good example if you don't understand my explanation) is it uses the hash tag, to load a page via XHR, and then inserts it into the page, so you can have a generic look that doesn't change between pages, that doesn't need PHP or the like.
It has several configuration properties, the main ones being:
A selector to use to find the place you would like to insert the loaded page.
A folder path to use at the document root. (Think Apache configuration)
The page to load if there isn't a hash tag.
I currently have them in an object called Natalie.config but I would like to do something like <script src="Natalie.js" data-natalie-docroot="/Folder"></script>
Is there any way to tell which tag the script is running from, or do you have to search all script tags for these attributes?
I would much rather prevent something like this from happening if possible:
<script src="Natalie.js"></script>
<script data-natalie-docroot="/Folder"></script>
I'd simply put data-natalie-docroot="/Folder" on the <body> tag. The reason being that it is not directly associated to the script itself. Your approach also wouldn't work if someone wanted to load your script using a dynamic script loader.