I have a contenteditable div where you type javascript which gets outputted into an empty script tag.
<div contenteditable="true" id="script-generator"></div>
<div id="save-script">Save</div>
<script type="text/shorthand" id="script">
</script>
So you write your script in the div, click save and I have some JS which gets the html of the contenteditable div and adds it to an empty script tag.
$('#save-script').click(function() {
var script = $('#script-generator').html();
$('#script').html(script);
});
So far this works. But the generated script has no effect. The browser must not recognise the script because it wasn't there on page load? How do I make the script take effect without reloading the page?
Note: The type/shortand on the script is because I'm using a plugin which converts shortand words into actual Javascript. So the user would just need to write shorthand into the contenteditable div, and the plugin would convert that to JS. This might be adding to the problem?
I don't think it works to modify an existing <script> element. If you want the script to be executed you need to add a new element.
$('#save-script').click(function() {
var script = $('#script-generator').html();
$("#script").text(script);
ShortHand.parseScripts();
});
Correct - you need to create the script tag to have it execute after load.
$('head').append($('<script />', {html: script}));
...which means you can remove your empty script tag.
I have set up a test that's similar to what you have been looking for. Take a look and see if that helps.
Working Demo
Test code:
<div id="script" style="display:none">
alert(4+4);
</div>
<input id="sLoad" type="button" value="Load/Execute Script" />
$('#sLoad').click(function(){
//You may want to append to the head
$('<script/>').append( $('#script').html() ).appendTo('#script');
});
Related
I'm trying to include my Adsense code from a file called sda.html located in the home folder of the server.
I'm using this code to include it:
<div w3-include-html="../../sda.html" class="section_title text-center"></div>
from this source: https://www.w3schools.com/howto/howto_html_include.asp
but idk I feel there's something wrong.
btw my site is only HTML and js, so if there is any other better option I'll be glad to hear it.
I also checked this one down:
<!--#include virtual="/menu.shtml" -->
but I didn't use it, since I have no clue how my next server will operated. so I skip it.
and this one here:
<object data="../../sda.html"></object>
I prefer this one, but I have no control of the look of it, I couldn't center or anything
the smaller the code the better it is.
Does sda.html contains only adsense code or whole part of the page?
The includeHTML function from w3school is not very good. I suspect the issue you are having is that that function uses innerHTML to set content and innerHTML doesn't execute <script> tags with content: check "Security considerations" on MDN page.
To workaround this you can do the following: remove <script> tags from sda.html and then, once you imported HTML run window.adsbygoogle.push({}) for each new ad unit. Example:
Add adsbygoogle.js tag in of your page:
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
Insert ad into a div with id div-with-ad.
const divWithAd = document.querySelector('#div-with-ad');
divWithAd.innerHTML = `
<ins class="adsbygoogle"
style="display:block; text-align:center;"
data-ad-format="fluid"
data-ad-layout="in-article"
data-ad-client="ca-pub-0123456789101112"
data-ad-slot="9876543210"></ins>
`;
adsbygoog.push({});
In "first.html", I load a page inside div using Javascript.
<div id="content">
<div id="lot">Next</div>
</div>
<script>
function load_page()
{
document.getElementById("lot").innerHTML='<object type="text/html" data="next.html"></object>';
}
</script>
Both "first.html" and "next.html" have a div called "banner". I don't want to show "banner" in "next.html". So I add the following lines in "next.html".
<script>
document.getElementById('banner').style.display = "none";
</script>
The weird thing is the banner in "first.html" disappears but not the one in "next.html".
So one way I think to get away with it is if I could reference like this.
"first.html" --> "lot" --> "next.html" --> "banner"
Then try to make it disappear.
I also try this in "next.html", but not working.
<script>
document.getElementById('lot').getElementById('banner').style.display = "none";
</script>
Thanks for the hint.
Solution: When I use iframe, it seems to work. The banner in "next.html" is clearly recognized instead of mixing with the one in "first.html".
I think the simple solution is to use different ID's for the different banners. Something like
id="innerBanner" and id="outerBanner"
Iframe syntax:
<iframe src="URL" width="xxx" height="xxx"></iframe>
I think your problem comes from the folowing line :
document.getElementById("lot").innerHTML='<object type="text/html" data="next.html"> </object>'\
Mabye you can do the same thing with a simple hyperlink:
Next
Than there is no chance, after you write the style in next.html, that it will change something in the previous page's html
I have a link (A link), which dynamically creates some html content into the page by a js file placed in the head content. This works well.
<head>
<script src="my.js">
</head>
<body>
<div>
<a href="A link">
</div>
</body>
Than clicked the A link, and this is created:
<div>
<a href="B link">
</div>
The newly created html content also contains a link (B link), which should use the same js file, as used before, but it seems, that the B link cannot see it, however the js file is still in the header content.
Works only if I put the js file in a script tag to the end of the dynamically created html content generated by A link, like this.
<div>
<a href="B link">
<script src="my.js">
</div>
But this means I load this js file twice. What am I missing here?
Thanks.
If you want the newly created element to perform some action then you should use this technique using jquery.
$(document).on('click', '.linkclass', function()
{
// Perform your action here.
alert('I was clicked');
});
live of Jquery is now obselete and is better to use on. In this way your all newly created element or already created elements having class as .linkclass will perform alert(); action. Hope it helps.
I am working on a small code snippet.
The Issue:
I want to have a couple of buttons, that on click load content into a div, using ajax.
I can get it working absolutely fine, with say images, and text. But cannot load with css and js.
Example: the index page:
<input type="button" onclick="example_ajax_request()" value="Click Me!" /> | <input type="button" onclick="example_ajax_request2()" value="Or Me!" />
<div id="example-placeholder">
<p>Placeholding text</p>
</div>
<script type="text/javascript">
function example_ajax_request() {
$('#example-placeholder').html('<p><img src="images/loader.gif" width="220" height="19" /></p>');
$('#example-placeholder').load("fat.html");
}
</script>
<script type="text/javascript">
function example_ajax_request2() {
$('#example-placeholder').html('<p><img src="images/loader.gif" width="220" height="19" /></p>');
$('#example-placeholder').load("joined_today.html");
}
</script>
The page joined_today.html is a full blown webpage ( which contains a div element ) only, and shaows AMCHARTS. Which obviously utilise js inc Raphael.
Anyhoo, the issue arises, from any webpage with headers, html and body tags. The script above doesnt render these.
So what am i doing wrong. Seemingly, we can only load into div id example_placeholder content that doesnt include JS, or CSS
Is there a better way.
Essentially our scenario is this ( I want to avoide iFrames )
We have web page, and a content div, with 3 buttons above the div.
On click of each button, the div gets loaded with a chart ( using amcharts js version )
On click of another button , another chart gets loaded inplace of the first chart, etc etc
Perhaps I am going about this wrong, any help appreciated.
Ste
You need to insert the <style>, <link> and <script> tags in another place, e.g. <head> or end of <body> with something like:
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'somescript.js';
document.getElementsByTagName('head')[0].appendChild(script);
One potential problem is to check whether a file (css or javascript) has been inserted. You may need to maintain a global list to check whether a file is already included.
Take a look at this source for "DOM-based On-Demand JavaScript".
Easy way to do this: load the js and CSS files on the parent page.
I have a script that runs within the body. How can I make it output directly after itself. Similar to echo in php.
e.g.
<div id="text">Text</div>
<div id="someotherdiv">
The text above says
<script>
$('#text').html().echo?;
</script>
</div>
You're looking for document.write, like this:
document.write($('#text').html());
EDIT: document.write will only work while the page is loading (as opposed to in an event handler or timer).
To append content later, use jQuery:
$('#someotherdiv').append($('#text').html());