reason: you need to control the audio of the part of the project built using iframe. Because the audio tag is located in the sub-page, you cannot find a way to disable browser sound in JS, so you need to use the volume control method in the sub-page (iframe nested pages) and the hreflink.window.childFunction (); method to call the sub-page. I created an img tag that sets the onclick event of the image to the method that the parent page references the child page.
<img id="audio" src="source/img/audio1.png" title="" onclick="callChildAudio()">
<iframe name="hreflink" id="hreflink" ></iframe>
function callChildAudio() {
var audio=document.getElementById("audio");
hreflink.window.audio(audio);
}problem: it works properly when you use this method for the first time. After switching the src of iframe. DOM0 for button is empty.
iframeSRC
try solution 1: other tags in the project are called JSON files using js and displayed using innerHTML. However, because innerHTML is reloading html, some dynamically bound events or styles may fail. Later, the experiment found that the innerHTML part also stopped after the page was loaded. The page is not affected.
attempt solution 2: suspect that the function of the parent page is invalid or not working. After console.log output in the callChildAudio method, it is found that the console outputs once when it is clicked for the first time. The console did not output information on the second click. Indicates that after the first click, the method of the child page overrides the click event of the parent page. The output will not be available when the subpage attempts console output. There is no way to verify the source of the error.
try to solve the problem that the 3:iframe parent page calls the child page using the Window object. Maybe the browser only supports one Window object and automatically ignores the window calling method of the second child page. Testing.