let's assume that the content is empty as given below.
<head>
</head>
If I want to change it dynamically to
<head>
<script src="jquery-1.8.0.min.js"></script>
</head>
is there anyway that AppInventor can do that?
You can select it and add to it as normal:
$('head').append('</script>');
JavaScript:
document.getElementsByTagName('head')[0].appendChild( ... );
Make DOM element like so:
script=document.createElement('</script>');
script.src='src';
document.getElementsByTagName('head')[0].appendChild(script);
Some simple javascript to change the innerHtml of document.head will work
document.head.innerHTML = "<script src=\"jquery-1.8.0.min.js\"></script>";
How about:
var HeadScript = document.createElement("SCRIPT")
HeadScript.src = "jquery-1.8.0.min.js"
document.head.appendChild(HeadScript)
Related
e.g. buttons..
<body disabled>
does not work
Thank you
The following script will select all descendants of your form element. You can use any selector to get the desired set of elements and apply this script to disable them all.
<script >
var form_elem=document.querySelectorAll("form *");
for(var i of form_elem){
i.setAttribute("disabled", true);
}
</script>
I would use javascript:
<script language='Javascript'>
document.getElementById("this_is_the_submitbutton").disabled = true;
</script>
Your submitbutton needs to have have the id='this_is_the_submitbutton'
I am not sure if this is possible or not...
I am trying to replace a specific part of a URL from my iframe with a string that is part of the mainframe's URL.
i.e. I am trying to replace the iframe link to include the userID.
Main URL: https://web.example.com?userID=9553c6
<iframe src="https://app.example.com?[Insert userID here]"></iframe>
If your site where is content under address https://web.example.com?userID=9553c6 in my opinion you can do this using eg. php
<body>
<iframe src="http://example.com?user_id=<?php echo urlencode($_GET['userId']) ?>"></iframe>
</body>
Then variable $_GET['userId'] will have value of 9553c6
Or you can use only js which will be a bit harder, because you have to parse location.search https://www.w3schools.com/jsref/prop_loc_search.asp and get specific part of it. Of course this value of param userId will be from main site.
Direct solution
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<style>
iframe {
width: 100%;
height: 1000px;
}
</style>
</head>
<body>
<iframe src="http://fotokrajobrazy.warmia.pl/galeria/fota.php?nr=1004"></iframe>
</body>
<script>
window.onload = function () {
var res = location.search.match(/userId\=(\w+)/);
var fr = document.getElementsByTagName('iframe')[0];
fr.setAttribute('src', fr.getAttribute('src').replace(/(nr\=)\d+/, '$1'+res[1]));
};
</script>
</html>
You can then edit main url like this:
http://127.0.0.1/stack.html?userId=1003
and
http://127.0.0.1/stack.html?userId=1002
etc. and the url of iframe will change too.
You need some simple string-hangling.
You say you're injecting the frame via JavaScript, so I'll suppose your code looks something like this.
let
ifr = document.createElement('iframe'),
src = 'some/url/here?user={user-id}',
user_id = '123456';
src = src.replace('{user-id}', user_id)
;
document.body.appendChild(ifr);
The key line is the one with .replace() - that's where we replace the placeholder with the actual value.
My English is weak so I give an example.
I want something like that
<!DOCTYPE html>
<html>
<head>
<title>MySite</title>
</head>
<body>
<div id="mydiv" testarg="teststring"></div>
<script>
var element = document.getElementById("mydiv");
var argstring = getArgument(element,"testarg");
</script>
</body>
</html>
You could use getAttribute to get an attribute's value, and setAttribute to set it (change it):
<!DOCTYPE html>
<html>
<head>
<title>MySite</title>
</head>
<body>
<div id="mydiv" testarg="teststring"></div>
<script>
var element = document.getElementById("mydiv");
var argstring = element.getAttribute('testarg');
console.log(argstring);
element.setAttribute('testarg', 'changed');
console.log(element.getAttribute('testarg'));
</script>
</body>
</html>
Your script should be,
var element = document.getElementById("mydiv");
var argstring = element.getAttribute("testarg");
Alternatively, you can use data attributes which is designed with extensibility in mind for data that should be associated with a particular element but need not have any defined meaning. data-* attributes allow us to store extra information on standard, semantic HTML elements without other hacks such as non-standard attributes, extra properties on DOM
So, your code will be like,
<div id="mydiv" data-testarg="teststring"></div>
<script>
var element = document.getElementById("mydiv");
var argstring = article.dataset.testarg;
</script>
var element = document.getElementById("mydiv");
var argstring = element.getAttribute('testarg');
console.log(argstring );
<div id="mydiv" testarg="teststring"></div>
I am coding a C# forms application that lets a user add custom html nodes to a html webpage. I have some javascript code that selects a html node to execute specific code for objects such as a jQuery ui slider.
To identify html nodes, I need to store an attribute in the tag that identifies the tag.
I am new to writing html code, and as such, I would like to ask if there is any reason why I should not use data attributes for tags? Are there any limitations are disadvantages that I should be aware of?
Here is some example code that I have currently working:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div data-customwebpagelayout-name='slider-increments'>
<div data-customwebpageobject-name='slider-increments'></div>
</div>
<p data-customwebpageobject-output-name='slider-increments'>1</p>
</body>
</html>
Thank you.
The common way to identify and select HTML tags is with either class or id.
If there is only going to be one of something on a page, you should use id. It looks like you have multiple of the same thing you want to identify, so I'd use class like so:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="customwebpagelayout slider-increments" >
<div class="customwebpageobject slider-increments"></div>
</div>
<p class="customwebpageobject slider-increments">1</p>
</body>
</html>
Then you could select the nodes with javascript like so:
document.getElementsByClassName("slider-increments");
or if you decide to use jQuery:
$(".slider-increments");
Data attributes are more of a pain to work with:
Raw Javascript (code adapted from code in this answer):
var matchingElements = [];
var allElements = document.getElementsByTagName('*');
for (var i = 0, n = allElements.length; i < n; i++){
if (allElements[i].getAttribute('data-customwebpagelayout-name') !== null){
// Element exists with attribute. Add to array.
matchingElements.push(allElements[i]);
}
}
//use matchingElements;
jQuery:
$("*[data-customwebpagelayout-name='data-customwebpagelayout-name']");
I need to set the HTML to iFrame. (iFrame src is null.)
e.g I get following string from web method call:
string s =
<html>
<head>
<style type="text/css"> <!-- .some dynamicaly generated css> </style>
<link id="css1" type="text/css" rel="stylesheet" href="1.css" /></head>
<body style="padding:0; margin:0;" tabIndex="-1">
--- some HTML elements ------
<script type="text/javascript">
---some script ---
</script>
</body>
</html>
I need to set this string into iFrame. But when I use iframe.innerHTML it strips out head and body tags.
Can you please help me in this? Do I need to add something to string or add some property to iframe.
Thanks in advance.
Why don't you you use jquery?, it will be more easer.
You just can var innerHtml = $( 'Your html' );
and then user function called $.html( innerHtml );